html - 右对齐的接片到侧面有不希望的间隙

我有一些问题：


我有一个tab-div-您可以在这里找到代码：http://pastebin.com/KPpgEBi6。正如您在箭头所指的http://i.stack.imgur.com/U2MUn.png中所看到的，有一些空间，选项卡不是从右角开始的，我该如何解决？
在内容div后面还有一些下划线。


该怎么办？

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="container" style="width: 45%;float: right;">
    <ul class="nav nav-tabs navbar-right">
        <li><a data-toggle="tab" href="#sub_cats_{CID}">{SUB_CATEGORIES}</a></li>
        <li class="active"><a data-toggle="tab" href="#category_{CID}">{CATEGORY}</a></li>
    </ul>
    <div class="clearfix"></div>
    <div class="tab-content" style="height: 100%;">
        <div id="category_{CID}" class="tab-pane fade in active category" style="background-image: url('{CATEGORY_IMAGE}');">
	        <h1> {CATEGORY_NAME} </h1>
        </div>
        <div id="sub_cats_{CID}" class="tab-pane fade">
            <ul class="sub_categories">
	            <li><a href="products.php?act=scat&id=7">ONE</a></li>
                <li><a href="products.php?act=scat&id=8">TWO</a></li>
                <li><a href="products.php?act=scat&id=12">THREE</a></li>
                <li><a href="products.php?act=scat&id=13">FOUR</a></li>
            </ul>
        </div>
    </div>
</div>

最佳答案

您确实不希望将内联样式应用于这样的主网格元素。使用您的框架，而不是反对它。

解决方法似乎是使标签正确对齐：

<div class="container">
    <ul class="nav nav-tabs navbar-right pull-right">

Demo

更新：问题是您在整个站点上应用RTL。将其反转为导航选项卡：

.nav-tabs {
  direction: ltr;
}

Demo 2

关于html - 右对齐的接片到侧面有不希望的间隙，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30174037/