0

これを約2日間機能させようとしていますが、何も得られません。これが私のレイアウトです。いくつかの要素を含むナビゲーション バーがあり、最後のものは右に浮いています。これにより、最後の li と最後から 2 番目の li の間に多くのスペースが残されます。最後から 2 番目の li で ul を埋めるにはどうすればよいですか? すでにテーブルとして扱おうとしましたが、うまくいきませんでした。これが私のcssの一部です：

.NavBar > ul {
list-style:inside none;
margin:0;
padding:0;
display: table;
width:100%;
}

.NavBar > ul > li {
list-style:inside none;
display:block;
float:left;
position:relative;
margin:0;
padding:0;
}

.NavBar > ul > li > a:hover {
background:#111;
}

.NavBar > ul > li:nth-last-child(2) {
list-style:inside none;
display:table-cell;
}

必要なコードがさらにある場合は、教えてください。投稿します。ありがとう。

これが私が起こる必要があることです。ここに画像の説明を入力

ニュース li は、それとログイン li の間のスペースを埋めるために成長する必要があります。

4

1 に答える 1

0

最後のliを左ではなく右に浮かせている理由はありますか? フロートを残したままにしておくと、間隔の問題は発生しません。

これで解決しない場合は、達成したいことについて詳細を説明する必要があると思います。

わかりました、あなたがまだ私たちに話していないことがもっとあると思いますが、この簡単で汚いサンプルを見て、あなたの目標にどれだけ近づいているか教えてください:

<html>
<head>
<style>

.NavBar > ul {
list-style:inside none;
margin:0;
padding:0;
width:100%;
}

.NavBar > ul > li {
list-style:inside none;
display:block;
float:left;
position:relative;
margin:0;
padding:0;
width: 10%;
background-color: #FFDDDD;
}

.NavBar > ul > li > a:hover {
background:#111;
}

.NavBar > ul > li:last-child {
float: right;
background-color: #DDFFDD;
}

.NavBar > ul > li:nth-last-child(2) {
width: 60%;
background-color: #DDDDFF;
}

</style>
</head>

<body>

  <nav class='NavBar'>
    <ul>
      <li>Widgets</>
      <li>Boojuns</>
      <li>Snarf</>
      <li>Xyzzy</>
      <li>Plugh</>
    </ul>
  </nav>

</body>

</html>

背景色は、何が起こっているかを確認するためのものです。

于 2013-06-19T19:16:10.340 に答える