2

贝娄是我试图实现的

|                                 link | link | link             a,b,c search:  |

link-link-link居中，向右a,b,c search浮动。
我尝试使用最简单的 CSS+HTML 来实现这一点

我有的：

<header>
<nav><a href="aaa">fff</a> | <a href="aaa">fff</a> | <a href="aaa">fff</a></nav>
<ul><li>a</li><li>b</li><li>c</li><li>search: </li></ul>
</header>

我text-align: center在header.
我display:block; float: right在ul

这几乎给了我正确的东西，除了 UL 是下面的一行......我可以通过给ul.

想知道是否有更好的解决方案。

4

4 回答 4

0

您可以给出ul绝对位置并将其固定在右侧，例如：

head { 
    position: relative;
}

ul {
    position: absolute;
    right: 0px;
    top: 0px;
}

这将让它显示在与nav. 不利的一面是，如果用户将浏览器的大小调整为较窄的宽度，它将与居中的文本重叠。

于 2012-11-25T14:52:05.703 回答
0

我建议使用divelements 和 to use display:table，display:table-row并display:table-cell让单元格的内容根据需要对齐。就像是：

<style>
.table-div{display:table; width:100%}
.table-div > div{display:table-row}
.table-div >div>div{display:table-cell; vertical-align:middle}

.l{text-align:left}
.c{text-align:center}
.r{text-align:right}

</style>

<div class="table-div">
  <div style="display:table-row">
     <div class="l">|</div>
     <div class="c"> link | link | link</div>
     <div class="r">a,b,c search:  |</div>
  <div>
</div>

我知道，这不是最简单的方法，但即使窗口将重新调整大小（这对某人来说不应该是一个优势），也会让事情按照你的需要出现。

于 2012-11-25T14:52:16.500 回答
0

最简单的方法：position: absolute; top: 0; right: 0;在<ul>

于 2012-11-25T14:54:59.577 回答
0

将一个 jsfiddle 放在一起总结所有上述答案，包括将列表项浮动到左侧以使其显示与您的示例完全相同。

http://jsfiddle.net/jonezy/qQGUQ/1/

header {text-align:center;position:relative;}
header ul {position:absolute;top:0;right:0;}
header ul li {float:left;}

希望有帮助。

于 2012-11-25T15:14:23.317 回答