Question

贝娄是我努力实现的目标

|                                 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的负余量 - 顶部来解决这个问题。

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

Answer 1

你可以给ul一个绝对位置，并将它贴在右边，如：

head { 
    position: relative;
}

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

这会让它显示在nav的同一行。缺点是，如果用户将浏览器调整到较窄的宽度，它将与居中文本重叠。

Answer 2

我建议使用div元素并使用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>

我知道，这不是最简单的方法，但即使窗口重新调整大小（这不应该对某人有利），也会让事情按需要出现。

Answer 3

最简单的方法：position: absolute; top: 0; right: 0;

上的<ul>

Answer 4

汇总了一个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;}

希望有所帮助。

最简单的方法是将元素居中，让另一个元素浮动到右边

4 个答案: