Question

我想在我的链接之间添加彩色vbars。最好的方法是什么？

案例

Home | About us | Contact

竖条需要为蓝色。当我使用带有蓝色的<div>标签时，我得到了这个：

Home 
|
About us
|
Contact

Answer 1

使用包含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

Answer 2

您可以将项目浮动到左侧。

Answer 3

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小提琴，了解实时演示。

Answer 4

你需要顶部浮动div到左边

div{
   float:left;
}

编辑：你应该给他们一个班级

.navDivs{
   float:left;
}

Answer 5

您可以使用span：

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

Answer 6

float:left的替代方法是使用display: inline，这可能会导致其他意外行为，但它可能适合您的需要。此外，除<span>外，您<div>与display: inline相同

}

Answer 7

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

在一行中使用不同的div标签

7 个答案: