[問題] CSS排版問題-如何去掉區塊間的縫隙
各位前輩好，我有個css排版問題需要求助
HTML如下：
<div id="button_bar">
<a href="#"><span class="main_up_button">選項0001</span></a>
<a href="#"><span class="main_up_button">選項0002</span></a>
<a href="#"><span class="main_up_button">選項0003</span></a>
<a href="#"><span class="main_up_button">選項0004</span></a>
<a href="#"><span class="main_up_button">選項0005</span></a>
<a href="#"><span class="main_up_button">選項0006</span></a>
<a href="#"><span class="main_up_button">選項0007</span></a>
</div>
CSS如下：
#button_bar{
width: 800px;
position: relative;
height: 20px;
margin: 0px 0px;
text-align: center;
padding-right: 0px;
padding-left: 0px;
background: #666666;
background-repeat: repeat-x;
}
.main_up_button{
cursor: pointer;
height: 20px;
width: 80px;
margin-right: 0px;
margin-left: 0px;
margin-top: 1px;
border-color: #605758;
border-width: 0px 0px 0px 0px;
border-style: solid;
color: #000000;
font-size: 10pt;
font-weight: bold;
padding-top: 5px;
padding-right: 0px;
padding-left: 0px;
text-align: center;
background: #0000FF;
}
margin都已經設成0了
padding也設成0了
但是顯示出來後在兩個選項間卻仍然會有大概數個pixel的縫隙
不知道為什麼這個bug就是無法排除
比較神奇的是如果把span裡面的「選項000x」文字去掉的話
那些span間的縫隙就不見了
另外把這些選項的置中改成置左置右的話，縫隙也會不見
想請問一下造成這個bug的原因是什麼呢?
我該怎麼修改StyleSheet來排除呢?
感謝各位
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 210.241.92.249
※ 編輯: hcl012 來自: 210.241.92.249 (12/31 14:57)
推
12/31 15:24, , 1F
12/31 15:24, 1F
感謝
原來只要將所有span標籤打在原始碼的同一行就可以了
可是在HTML原始碼裡面空白字元不是要用 才行嗎?
又為什麼把text-align改成right或left的話就不會顯示空白呢?
※ 編輯: hcl012 來自: 210.241.92.249 (12/31 15:38)
推
12/31 15:48, , 2F
12/31 15:48, 2F
推
12/31 15:52, , 3F
12/31 15:52, 3F
→
12/31 19:03, , 4F
12/31 19:03, 4F
推
01/01 03:05, , 5F
01/01 03:05, 5F