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が1行下にあることを除いて、これはほぼ正しいことを私に与えます...私は負のマージントップをに与えることによってこれを解決することができますul。

より良い解決策があるかどうか疑問に思います。

4

4 に答える 4

0

あなたはul絶対的な位置を与えて、それを次のように右に貼り付けることができます：

head { 
    position: relative;
}

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

これにより、と同じ行に表示されnavます。欠点は、ユーザーがブラウザのサイズを狭い幅に変更すると、中央のテキストと重なることです。

于 2012-11-25T14:52:05.703 に答える
0

div要素を使用して、を使用しdisplay:table、必要に応じてセルのコンテンツを整列させることをお勧めします。何かのようなもの：display:table-rowdisplay: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 に答える