0

ページのヘッダーにナビゲーションのような構造が必要なので、インラインリストを使用することにしましたが、生成される結果は私が想像したものではありません。要素を3つの別々の行に配置しています。

Element 1    Element 2    Element 3

上記は私が達成しようとしていることですが、現在私は得ています、

Element 1
Element 2
Element 3

これは私のCSSとHTMLスニペットです：

CSS

#nav li {
    display: inline;
}

HTML

<ul id="nav">
    <li><button id="left_nav"><</button></li>
    <li><div id="day">Monday</div></li>
    <li><button id="right_nav">></button></li>
</ul>

ありがとう。

4

8 に答える 8

1

インラインの代わりにインラインブロックを使用します。これはfloatで使用することもできます...

インラインブロックで、

#nav li {
    display: inline-block;
}

フロートによって、

#nav {
      overflow:hidden;
}
#nav li {
      float:left; margin-right:10px;
}
于 2013-03-20T04:54:03.770 に答える
1

以下を使用してみてください。

#nav li {
    list-style: none;
    float: left;
    margin-right: 5px;
}
于 2013-03-20T04:54:59.070 に答える
0

これをLIのCSSに追加します...

li{ display:inline; }
于 2013-03-20T04:50:44.750 に答える
0

使用する

#nav li {
    display: inline-block;
}

デモ：フィドル

于 2013-03-20T04:54:48.327 に答える
0

使用float:leftまたはfloat:right 並べて配置

#nav li { 

float:left;

}
于 2013-03-20T04:55:27.040 に答える
0

あなたは持っていてbuttons、div中にli与えるwidthとdivそれbuttonはうまくいくでしょう。

divブロックレベルの要素であり、width固定幅を割り当てない場合はページ全体を使用するためです。

また

それに適用float: left;するliこともできます。

于 2013-03-20T04:56:31.757 に答える
0

このCSSを追加します。

#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{display:inline; height:30px; float:left; list-style:none; margin-left:15px;}
于 2013-03-20T04:58:29.087 に答える
0

構造はユーザーごとに異なります。リンクを確認してください：http：//jsfiddle.net/wWyMW/1/

<div id="nav">
   <ul>
       <li>
           <a href="#">Element <span>1</span></a>
           <div class="clr"></div>
       </li>
       <li>
           <a href="#">Element <span>2</span></a>
           <div class="clr"></div>
       </li>
        <li>
           <a href="#">Element <span>3</span></a>
           <div class="clr"></div>
       </li>
   </ul>
   <div class="clr"></div>
</div>

そしてCSS：

*{ matgin:0; padding:0}
ul, li{ list-style:none}
a{ text-decoration:none}
.clr{ clear:both;}
#nav{margin:auto; width:960px;}
#nav ul li{ float:left; margin-left:10px}
#nav ul li:first-child{ margin-left:0}
#nav ul li a{ display:block; background:#f00; color:#0F0; line-height:30px; text-align:center; width:70px; padding:0px 10px; font-weight:bold;}
#nav ul li a span{ display:block; float:right;}
于 2013-03-20T05:06:45.793 に答える