HTML中的位置文本

我想在網頁的菜單欄上放置文字（Home（spacing）About（spacing）Pictures）告訴我如何做到這一點。我讓我這樣的（家關於圖片）HTML中的位置文本

<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>

來源

2013-03-10 Hamraz

試試這個

<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-10 10:23:10 PSR

只需添加 

<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>標籤已被棄用，使用CSS color屬性，而不是

來源

2013-03-10 10:23:17

爲什麼不使用CSS？ – 2013-03-10 10:23:29

@Pekka웃我編輯我的答案:)但這是一個很小的要求，所以不想混淆他:) – 2013-03-10 10:24:49

@Pekka웃LOL我完全錯過了''標籤，謝謝你通知我 – 2013-03-10 10:28:10

div的使用和設置浮動：左和應用填充。

<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-10 10:26:55

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; 
}

工作demo

來源

2013-03-10 10:41:45 jhunlio

HTML中的位置文本

回答

相關問題