Question

我正在尝试将日期设置为下图，但是我将该虚线放在与日期相同的行中。

主要问题是我无法更改标记。我有以下结构：

<li class="activity-date-grouping">
    <span>4 Apr 2013</span>
</li>

我无法添加其他元素。我尝试过边框和背景，但我无法移动线。带边框的Here is a jsfiddle。是否有可能在没有额外元素的情况下实现这一目标？

Answer 1

由于您无法更改现有结构，因此您可以使用伪元素：

.activity-date-grouping { 
   /* ... */
   white-space: nowrap;
}

.activity-date-grouping span:after{
    display:inline-block;
    width: 100%;
    height: 5px;
    overflow:hidden;
    content: ".";
    border-bottom:1px dashed #911c51;
    vertical-align: bottom;
    margin-bottom: 5px;
    margin-left: 5px;
}

http://jsfiddle.net/hTWhG/4/

Answer 2

与James Montagne的解决方案不同，这个解决方案允许元素保持静止：

http://cssdeck.com/labs/sukywzdz

.activity-date-grouping span {
  overflow: hidden;
  font-weight: bold;
  padding: 2px 5px 2px 5px;
  color: #911c51;
  font-size: 1.3em;
  padding-bottom: 5px;
  display: block;
}

.activity-date-grouping span:after {
    content: " ";
    display: inline-block;
    border-bottom:1px dashed;
    width: 100%;
    margin-right: -50%;
    /* optional */
    position: relative;
    left: .5em;
}

该演示的样式附加到li。

Answer 3

我设法使用绝对位置做你想做的事情，但它不是很干净：

.activity-date-grouping span {
    position: absolute;   
    top: 5px;
    left: 0px;
}

See the update fiddle

Answer 4

我更新了您的fiddle，似乎按照您的意愿显示。关键是要为span元素本身添加一些CSS。请注意，它也应该在旧版浏览器中工作，因为我没有使用：after伪类或“content”属性......

.activity-date-grouping { 
    display: block;
    font-weight: bold;
    padding: 2px 5px 22px 5px;
    color: #911c51;
    font-size: 1.3em;
    margin-left: 70px;
    border-bottom:1px solid #911c51;
}

.activity-date-grouping span { position: absolute; margin-left: -110px }

Answer 5

为span

设置以下CSS

span
{
    position:absolute;
    top:5px;
    background-color:white;
}

JS Fiddle

Answer 6

您可以使用适当的背景图像进行无绝对位置：

li.activity-date-grouping {
    background-image: url(https://www.google.com/images/srpr/logo4w.png);
    background-position: 0px 0.8em;
    background-repeat: repeat-x;
    background-size: 100px 2px;
    list-style-type: none;
}

li.activity-date-grouping span {
    display: inline;
    font-size: 1em;
    padding: 5px;
    background-color: #ffffff;
}

http://jsfiddle.net/4Ezxn/

Answer 7

哇，这里的人太快了，但我会发布我的代码只是为了它。这里有两种可能的解决方案，第一种是更好的解决方案（正如其他帖子所示）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

ul {list-style: none; margin: 0; padding: 0;}

.activity-date-grouping span {
    font-weight: bold;
    font-size: 1.3em;
    color: #911c51;
    position: relative;
}

.activity-date-grouping span:after {
    content: "";
    position: absolute;
    left: 105%;
    bottom: 0.2em;
    width: 999em;
    border-bottom:1px dashed #911c51;
}
</style>

</head>
<body>

<ul>
<li class="activity-date-grouping">
   <span>4 Apr 2013</span>
</li>
<ul>

</body>
</html>

另一个：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

ul {list-style: none;}
.activity-date-grouping {
    border-bottom:1px dashed #911c51;
}

.activity-date-grouping span {
    font-weight: bold;
    font-size: 1.3em;
    color: #911c51;
    display: inline-block;
    background: white;
    margin-bottom: -1px;
}
</style>

</head>
<body>

<ul>
<li class="activity-date-grouping">
    <span>4 Apr 2013</span>
</li>
<ul>

</body>
</html>

内容后如何制作背景/边框？

7 个答案: