4

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

图片

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

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

而且我不能添加另一个元素。我尝试过使用边框和背景，但无法向上移动线条。这是一个带有边框的jsfiddle。是否有可能在没有额外元素的情况下实现这一目标？

4

7 回答 7

5

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

.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/

于 2013-04-30T14:34:18.547 回答
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.

于 2013-04-30T14:37:45.807 回答
1

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

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

查看更新小提琴

于 2013-04-30T14:35:27.313 回答
1

我更新了你的小提琴，似乎如你所愿。关键是向span元素本身添加一些 CSS。请注意，它也应该在旧浏览器中工作，因为我没有使用 :after 伪类或“内容”属性......

.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 }
于 2013-04-30T14:36:43.633 回答
1

为 span 设置以下 CSS

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

JS小提琴

于 2013-04-30T14:37:10.397 回答
0

您可以使用适当的背景图像在没有绝对位置的情况下执行此操作：

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/

于 2013-04-30T14:44:45.897 回答
0

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

<!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>
于 2013-04-30T14:47:40.750 回答