0

私は6つのリンクを持っており、2行にすべて異なる文字の長さがあります。私はすべてを均等に揃える必要があります。このような：

Home       About Us     Location
Contact    Visit        Schedule

これを行う方法はli、特定の幅を作成してから右側に適切なマージンを適用することだと思いますが、何らかの理由で幅を適用できません。次のHTMLスケルトンがある場合、これを実現するためにCSSをどのように編集しますか？私は解決策を求めてWebを調べましたが、メニューが2つの別々の行にあるため、同様の質問は見つかりませんでした。

<div class="footer">
 <ul id="footerlinks">
  <li><a href="link 1">Home</a></li>
  <li><a href="link 2">About Us </a></li>
  <li><a href="link 3">Location</a></li>
<br>
  <li><a href="link4">Contact</a></li>
  <li><a href="link5">Visit</a></li>
  <li><a href="link6">Schedule</a></li>
</ul>

4

4 に答える 4

1

<ul>との幅を修正し<li>ます。そしてそれを削除する<br />と、マークアップが無効になります。

HTML

<ul id="footerlinks">
  <li><a href="link 1">Home</a></li>
  <li><a href="link 2">About Us </a></li>
  <li><a href="link 3">Location</a></li>
  <li><a href="link4">Contact</a></li>
  <li><a href="link5">Visit</a></li>
  <li><a href="link6">Schedule</a></li>
</ul>

CSS

#footerlinks { width: 300px; }
#footerlinks li { width: 100px; display: inline-block; }

デモ

デモ（空白修正あり）

于 2012-05-05T03:47:48.393 に答える
0

li要素にインラインブロックと幅の表示プロパティを指定します。これがデモンストレーションするjsfiddleです：

li { display: inline-block; width: 100px; }
于 2012-05-05T03:44:26.307 に答える
0

これをチェックして：

<pre>
test
&#x09;test
&#x09;&#x09;test
</pre>

出典：HTMLでタブインデントを作成するにはどうすればよいですか

于 2012-05-05T03:45:12.270 に答える
0

まず、a<br/>はの有効な子要素ではありません<ul/>。

に幅を適用する<li/>には、ブロックレベルの要素にする必要があります。

<ul id="footerlinks">
  <li><a href="link 1">Home</a></li>
  <li><a href="link 2">About Us </a></li>
  <li><a href="link 3">Location</a></li>
  <li><a href="link4">Contact</a></li>
  <li><a href="link5">Visit</a></li>
  <li><a href="link6">Schedule</a></li>
</ul>​

と

#footerlinks {
    background:#ccc;
    overflow:hidden;
    padding:5px;
    width:300px;
}

#footerlinks li {
    float:left;
    padding:5px 0;
    width:33%;
}​

これが実際の例です-http://jsfiddle.net/jaredhoyt/xbvyP/

于 2012-05-05T03:49:59.007 に答える