1. 首頁
  2. 問答
  3. 在一行中使用不同的div標籤

在一行中使用不同的div標籤

2012-03-23 59 views
0

我想在我的鏈接之間有彩色的vbars。什麼是最好的方式來做到這一點？在一行中使用不同的div標籤

Home | About us | Contact

豎線必須是藍色的情況。當我使用一個<div>標籤顏色藍色我得到這個：

Home 
| 
About us 
| 
Contact

來源

2012-03-23 atMaarten

回答

0

float:left的替代方法是使用display: inline，這可能會導致其他意外行爲，但它可能適用於您的需要。此外，可以在一個<span>其是相同，除了它是<div>通過display: inline默認

來源

2012-03-23 22:35:44 nathanjosiah

+1

儘管這是被接受的答案，但大衛托馬斯的答案更具語義。 – nathanjosiah 2012-03-23 23:13:27

0

你需要頂部浮動的div向左

div{ 
    float:left; 
}

編輯： 你應該給他們一個類

.navDivs{ 
    float:left; 
}

來源

2012-03-23 22:33:47

+0

如果他在他的css樣式表中添加了這個，頁面可能會看起來很有趣：p – haltabush 2012-03-23 22:35:56

+0

可能是這樣，如果他正確地問了這個問題並且包含了代碼，我可能會更加具體 – 2012-03-23 22:39:34

0

您可以使用span：

<span style="color: blue;">|</span>

來源

2012-03-23 22:34:25

+0

With display：inline this work out！ – atMaarten 2012-03-23 23:08:39

6

使用列表，a元素：

<ul> 
    <li><a href="/home.html">Home</a></li> 
    <li><a href="/about.html">About us</a></li> 
    <li><a href="/contact.html">Contact</a></li> 
</ul>

然後使用CSS樣式這些元素：

ul { 
    list-style-type: none; 
} 

ul li { 
    float: left; 
    border-left: 2px solid #00f; 
    margin: 0; 
} 

ul li:first-child { 
    border-left: 0 none transparent; 
} 

ul li a:link, 
ul li a:visited { 
    display: block; 
    margin: 0; 
    padding: 0.2em 0.6em; /* or whatever */ 
} 

ul li a:hover, 
ul li a:active, 
ul li a:focus { 
    color: #f00; 
}​

JS Fiddle demo。

來源

2012-03-23 22:35:33

1

div元件是塊級元素，這意味着它們在視覺上格式化爲塊（例如段落）。您可以改爲使用span，因爲span元素是內聯級元素，不會形成新的內容塊。

但是，如果您只給a元素的右邊界（除最後一個邊框外），那麼您的標記將更具語義。

HTML

<a href="#">Home</a><a href="#">About us</a><a href="#">Contact</a>

CSS

a { border-right: 1px solid red; } 
a:last-child { border-right: none; }

見this搗鼓現場演示。

來源

2012-03-23 22:35:51 melhosseiny

0 
<html> 
    <head> 
     <style type='text/css'> 
      #menu a {display:inline-block;border-right:1px solid blue;padding:5px;color:blue;text-decoration:none;} 
      #menu a:hover {color:red;} 
     </style> 
    </head> 
    <body> 
     <div id='menu'> 
      <a href='/home/'>Home</a> 
      <a href='/about/'>About Us</a> 
      <a href='/contact/'>Contact</a> 
     </div> 
    </body> 
</html>

編輯：小提琴現場演示here。

來源

2012-03-23 22:44:14 Stefan

+0

也按照melhosseiny的建議使用#menu a：last-child {border-right：none;}（如我的小提琴中所示）。 – Stefan 2012-03-23 23:04:23

+0

這個答案也是語義的，比David Thomas的答案需要更少的CSS和更少的html。但是，如果你堅持使用列表元素，你可以將菜單div更改爲菜單ul，然後用li標籤包住錨點。 – Stefan 2012-03-24 09:44:30

2

您可以將項目浮動到左側。

來源

2012-03-24 09:56:52 Dave

相關問題

 相關問題