可能在水平列表项之间添加水平线？

Question

＆＃13;

＆＃13;

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: purple;
    padding: 0.2em 0.6em;
    margin: 0em 2em;

    border-right: 1px solid white;
}

a:hover {
    background-color: fuchsia;
}

li {
    display: inline;
}

＆＃13;

<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我想知道是否有办法通过代码完成我在该图片中所拥有的内容。 不是边框或文本，而是菜单项之间的行。 我尝试了一些方法，包括制作一个div，但我似乎无法使样式正确。 如果有人有解决方案，他们会在我喜欢听之前使用它。 提前感谢您的帮助。

Answer 1

您可以使用:after：pseudo-element添加该行。要过滤掉上一个div，您可以使用#container .box:not(:last-child)选择器，这将选择所有.box es但最后一个。

＆＃13;

＆＃13;

.box {
  position: relative;
  width: 50px;
  text-align: center;
  display: inline-block;
  border: 2px solid black;
  padding: 2px 5px 2px 5px;
}
#container .box:not(:last-child) {
  margin-right: 25px;
}
#container .box:not(:last-child):after {
  position: absolute;
  content: '';
  right: -50%;
  top: 0%;
  width: 50%;
  height: 50%;
  border-bottom: 2px solid black;
}

＆＃13;

<div id="container">
  <div class="box">Link 1</div>
  <div class="box">Link 2</div>
  <div class="box">Link 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做：

HTML：

<div class="menu-item">LINK 1</div>
<div class="menu-line"></div>
<div class="menu-item">LINK 2</div>
<div class="menu-line"></div>
<div class="menu-item">LINK 3</div>

CSS：

.menu-item, .menu-line {
    width: 80px;
    height: 20px;
    border: 1px solid black;
    float: left;
    text-align: center;
}
.menu-line {
    width: 25px;
    height: 0px;
    margin-top: 9px;
}

DEMO：http://jsfiddle.net/vqm7oawq/

Answer 3

如果是表格，您必须以不同的方式进行。这是怎么回事。 （因为你没有说明你要找的东西）

http://jsfiddle.net/3ndwnohn/1/

＆＃13;

＆＃13;

table tr td {
    padding: 10px;
    border: 1px solid #444;
}
td.space {
    padding:10px;
    border: 0;
}
td.space::before {
    position: absolute;
    margin-left: -12px;
    height: 1px;
    width: 25px;
    background-color: #444;
    content: ' ';
}

＆＃13;

<table>
    <tr>
        <td>numberOne</td>
        <td class="space"></td>
        <td>numberTwo</td>
        <td class="space"></td>
        <td>numberThree</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;