0

Web ページのメニュー バーに (Home (spacing) About (spacing) Pictures) のようなテキストを配置したいのですが、その方法を教えてください。私はこのようになっています（写真についてのホーム）

 <div id="menuOption" >
 <a href="www.google.com"><font color="#FFFFFF" >Home</font></a>
<a href="./download.html"><font color="#FFFFFF" >About</font></a>
<a href="./purchase.html"><font color="#FFFFFF" >Picture</font></a>
</div>
   </div>
4

4 に答える 4

1

追加するだけ&nbsp;

<div id="menuOption" >
   <a href="www.google.com"><font color="#FFFFFF" >Home</font></a>&nbsp;
   <a href="./download.html"><font color="#FFFFFF" >About</font></a>&nbsp;
   <a href="./purchase.html"><font color="#FFFFFF" >Picture</font></a>&nbsp
</div>

またはより良い使用<ul>と作成<li> display: inline-block;と使用padding

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Pictures</li>
</ul>

CSS

ul li {
   display: inline-block;
   padding: 5px 8px; 
   /* Change this according to your requirement, 
   5px is top, bottom and 8px is left, right */
}

注:<font>タグは非推奨です。代わりに CSScolorプロパティを使用してください

于 2013-03-10T10:23:17.637 に答える
0

これを試して

<ul>
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
    </ul>
于 2013-03-10T10:23:10.450 に答える
0

html

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Picture</a></li>
</ul>

CSS

ul {
    float:left;
}
ul li{
    float:left;
    list-style-type:none;
    padding:0 5px;
}
ul li a {
    text-decoration:none;
}

動作デモ

于 2013-03-10T10:41:45.370 に答える
0

div を使用して float:left を設定し、パディングを適用します。

<div id="menuOption" >
    <div style="float:left; padding-left:5px"><a href="www.google.com"><font color="#0000" >Home</font></a></div>
<div style="float:left; padding-left:5px"><a href="./download.html"><font color="#0000" >About</font></a></div>
<div style="float:left; padding-left:5px"> <a href="./purchase.html"><font color="#0000" >Picture</font></a></div>
</div>
于 2013-03-10T10:26:55.700 に答える