Question

我有一些问题：

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

怎么办？

＆＃13;

<!-- 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>

＆＃13;

Answer 1

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

此处的修复似乎是将您的标签正确对齐：

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

<强> Demo

更新：问题是您在整个网站上应用RTL。将其反转为导航标签：

.nav-tabs { direction: ltr; }

<强> Demo 2

右对齐的标签与侧面有不希望的间隙

1 个答案: