Question

我有以下内容......

   <div id="nav-above" class="navigation"> 
 <div class="nav-previous"><a href="link" rel="prev"><span class="meta-nav">&laquo;</span> title</a></div> 
 <div class="nav-next"><a href="link" rel="next">title <span class="meta-nav">&raquo;</span></a></div> 
</div><!– #nav-above –>

单独使用外部CSS是否可以强制所有这些只保留在一个行？

Answer 1

试试这个：http://jsfiddle.net/dT49F/

HTML：

<div class="container">
    <div id="nav-above" class="navigation"> 
        <div class="nav-previous">
            <a href="link" rel="prev">
                <span class="meta-nav">&laquo;</span>
                much much longer link title here and here and here
            </a>
        </div> 
        <div class="nav-next">
            <a href="link" rel="next">
                much much longer link title here and here and here 
                <span class="meta-nav">&raquo;</span>
            </a>
        </div> 
    </div>
</div>

CSS：

.container div {
    display: inline;
    white-space: nowrap;
}

Answer 2

内部DIV的任何原因？我只是放弃它们 - 如果你需要这些类，可以直接将它们分配给链接：

<div id="nav-above" class="navigation"> 
<a href="link" rel="prev" class="nav-previous"><span class="meta-nav">&laquo;</span> title</a>
<a href="link" rel="next" class="nav-next">title <span class="meta-nav">&raquo;</span></a>
</div><!– #nav-above –>

Answer 3

div[class^=nav-] {
    float: left;
}

那应该有用。请注意我的代码段使用的是CSS3选择器，因此它可能无法在不太先进的浏览器中使用。为两个div提供相同的类，然后您可以使用普通选择器。

更新：

这在IE6中不起作用，除非你做这样的事情：

<div id="nav-above" class="navigation"> 
 <div class="nav-previous navigation-links"><a href="link" rel="prev"><span class="meta-nav">&laquo;</span> title</a></div> 
 <div class="nav-next navigation-links"><a href="link" rel="next">title <span class="meta-nav">&raquo;</span></a></div> 
</div><!– #nav-above –>

（注意新类.navigation-links）

然后只需更改css选择器：

div.navigation-links {
    float: left;
}

强制div中的所有文本保持在1行

3 个答案: