以下JSFiddle显示了我的问题: http://jsfiddle.net/WREV3/
它看起来很干净:
我的问题:如何让列表项之间的边界跨越子弹?
我想要彩色子弹,因此使用:before
技巧。有了这个我不得不添加一些负面margin-left
,当然子弹落在“框架”之外。但是我如何得到这样的边框:
* Item here spanning
multiple lines >
-----------------------
* Another Item >
-----------------------
* Wow. More! >
-----------------------
注意第一项第二行的缩进:与第一行相同的缩进。
HTML标记:
<ul>
<li class="new">
<span>Item 1 asd samdioa smodmasiom doasdmi oasi mdioas
<div>»</div>
</span>
<div>2014-03-22, 14:20:21</div>
</li>
<li class="new">
<span>Item 2 asd asd asdas
<div>»</div>
</span>
<div>2014-03-20, 11:20:03</div>
</li>
<li>
<span>
Item 3 asd asd asdas sduiosmn diomsio d
<div>»</div></span>
<div>2014-03-19, 04:01:35</div>
</li>
<li>
<span>
Item 4 asd asdasd
<div>»</div>
</span>
<div>2014-03-15, 09:20:05</div>
</li>
</ul>
CSS:
ul {
list-style: none;
font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
font-size: 13px;
width: 200px;
}
ul li.new:before {
color: #f00;
content: "•";
padding-right: 0;
position: relative;
left: -3px;
margin-left: -12px;
}
ul li {
padding: 5px 9px 5px 0;
border-bottom: 1px solid gray;
}
ul li span {
font-weight: bold;
}
ul li span div {
float: right;
font-weight: normal;
}
ul li span + div {
padding-top: 2px;
font-size: 9px;
}
答案 0 :(得分:2)
对absolute
使用position
:before
,对margin-left
使用padding-left
,并为li
添加{{1}},以便为生成的项目符号节省空间。
http://jsfiddle.net/WREV3/8/
答案 1 :(得分:0)
如果您愿意,可以使用list-style-position:inside
移动标准项目符号,但您可能需要查看其他一些CSS以影响其他元素
<强> CSS 强>
ul {
font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
font-size: 13px;
width: 200px;
list-style-position: inside; /* here :not 'list-style:none` has been removed */
}
ul li {
border-bottom: 1px solid gray;
}
ul li span {
font-weight: bold;
}
ul li span div {
float: right;
font-weight: normal;
}
ul li span + div {
padding-top: 2px;
font-size: 9px;
}
答案 2 :(得分:0)
你可以试试这个:
HTML
<ul>
<li class="new">
<span>Item 1 asd samdioa smodmasiom doasdmi oasi mdioas
<div>»</div>
</span>
<div>2014-03-22, 14:20:21</div>
</li>
<hr />
<li class="new">
<span>Item 2 asd asd asdas
<div>»</div>
</span>
<div>2014-03-20, 11:20:03</div>
</li>
<hr />
<li>
<span>
Item 3 asd asd asdas sduiosmn diomsio d
<div>»</div></span>
<div>2014-03-19, 04:01:35</div>
</li>
<hr />
<li>
<span>
Item 4 asd asdasd
<div>»</div>
</span>
<div>2014-03-15, 09:20:05</div>
</li>
<hr />
</ul>
CSS
ul {
list-style: none;
font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
font-size: 13px;
width: 200px;
}
ul li.new:before {
color: #f00;
content: "•";
padding-right: 0;
position: relative;
left: -3px;
margin-left: -12px;
}
ul li {
padding: 5px 9px 5px 0;
}
ul li span {
font-weight: bold;
}
ul li span div {
float: right;
font-weight: normal;
}
ul li span + div {
padding-top: 2px;
font-size: 9px;
}
hr{
margin-left:-1.5em;
border:none;
height:1px;
background:#000;
}
答案 3 :(得分:0)
你有。工作和有效。
HTML:
<ul>
<li class="new">
<span>Item 1 asd samdioa smodmasiom doasdmi oasi mdioas
<div>»</div>
</span>
<div>2014-03-22, 14:20:21</div>
</li>
<li class="border"></li>
</ul>
CSS:
ul {
list-style: none;
font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
font-size: 13px;
width: 200px;
}
ul li.new:before {
color: #f00;
content: "•";
padding-right: 0;
position: relative;
left: -3px;
margin-left: -12px;
}
ul li {
padding: 5px 9px 5px 0;
border: 0;
}
ul li.border{
border-bottom: 1px solid gray;
padding: 0;
margin: 0;
width: 212px;
margin-left: -12px;
}
ul li span {
font-weight: bold;
}
ul li span div {
float: right;
font-weight: normal;
}
ul li span + div {
padding-top: 2px;
font-size: 9px;
}
答案 4 :(得分:0)
您可以从
更改<li>
css定义
ul li {
padding: 5px 9px 5px 0;
border-bottom: 1px solid gray;
}
到
ul li {
padding: 5px 9px 5px 0;
position: relative;
}
ul li:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
border: 1px solid gray;
width: 220px;
margin-left: -20px;
}
,无需更改HTML代码的结构。