Question

我的li元素看起来像这样：

|    Link    |

我希望它变成这样的SOLID行：

|----Link----|

以下是代码的链接： http://jsfiddle.net/sh9hY/

我已经尝试在li元素中放入hr标记并使hr内联但失败了。我遇到的问题是我需要行来环绕文本。我对此不感兴趣。

Answer 1

将此添加到您的css中：

我更新了输出：

CSS：

.content {
  margin:0 auto;
    width:200px;
}

ul.events {
  list-style-type:none;
  margin:0;
  padding: 0 0 0px 0;
    width:auto;
    display:inline-block;
}

ul.events li {
  border-left: 1px solid rgb(0,169,212);
  border-right: 1px solid rgb(0,169,212);
  font-size:0.9em;
  font-weight:bold;
  margin-bottom:6px;
  padding:0px 0;
  position:relative;
  text-align:center;
}

ul.events li:before,ul.events li:after{
    content : "----";
}

Fiddle Demo

Answer 2

Here's another alternative

<hr/><span>Link</span>


li span {
    background-color: #fff;
    color: #000;
}

hr {  
    border: none;
    color: #000;
    background-color: #000;
    height: 1px;
    margin-top: 9px;
    position: absolute;
    display: block;
    width: 100%;
    z-index: -1;
}

Answer 3

你可以试试这个：

Demo

<div class="content">
<ul class="events">
    <li class="green"><a>Link</a></li>
</ul>
</div>

Answer 4

ul.events li:before,ul.events li:after{
    content: "--------";
    letter-spacing: -1px;
}

在<li>标签</li>中绘制线条

4 个答案: