Q

導航條 - 每個按鈕都在一條獨立的線上，我該如何解決這個問題？

html
css

2011-07-05 15 views 1 likes

1

演示：http://glados.cc/eJdemo/導航條 - 每個按鈕都在一條獨立的線上，我該如何解決這個問題？

我的代碼：

<style type="text/css"> 
#home 
{ 
display: block; 
width: 40px; 
height: 38px; 
background: url("bar1.png") no-repeat 0 0; 
} 
#home:hover 
{ 
background-position: 0 -38px; 
} 
#myplaces 
{ 
display: block; 
width: 123px; 
height: 38px; 
background: url("bar2.png") no-repeat 0 0; 
} 
#myplaces:hover 
{ 
background-position: 0 -38px; 
} 
</style> 
</head> 
<body> 
<a id="home" href="#" title="Home"></a> 
<a id="myplaces" href="#" title="My Places"></a> 
</body>

我只是無法弄清楚如何將它們壓扁到同一行。我是新來的CSS和谷歌搜索沒有得到我任何答案。謝謝你的幫助！

2011-07-05 apscience

A

回答

3

你需要浮動你的鏈接。
將'float：left'添加到兩個鏈接的CSS中。

2011-07-05 12:59:43 Jrod

1

簡單：display:block使他們分開行。改爲嘗試display:inline。

2011-07-05 12:58:41 SteeveDroz

+0

或從鏈接中刪除顯示屬性默認內聯元素 –

+0

嗯...是的，當然'：-P'嘿嘿... – SteeveDroz

+2

背景，固定高度等將不起作用（至少因爲它們目前在上面的代碼中實現），如果它們只是簡單地改爲「內聯」。看到我的回答，這表明移動到嵌入塊 – ADW

3

您可以把它們飄浮（見Jrod答案），或另一種選擇是從改變：

display: block;

到：

display: inline-block;

2011-07-05 13:00:50 ADW

+0

使用「內聯塊」的按鈕之間會有間隙。它可以通過刪除HTML中鏈接之間的空白來修復（例如）。但是，使用'float：left'會更容易。 – thirtydot

+0

@thirtydot：我認爲這兩種方法都有優點和缺點。當然，float：left是一個很好的解決方案，我爲此提出了jrod的回答。 – ADW

0

您應該設置display到inline-block，然後margin:0px;。請注意，display:inline不起作用。而你應該把<a>標籤放在同一行上。

2011-07-05 13:02:22 kongr45gpen

相關問題