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

あなたのfiddleを更新しました。希望どおりに表示されているようです。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

スパンに次の CSS を設定します。

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

JSフィドル

于 2013-04-30T14:37:10.397 に答える
1

私はあなたが絶対位置を使ってやりたいことをすることができますが、それはあまりきれいではありません:

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

更新フィドルを参照してください

于 2013-04-30T14:35:27.313 に答える
0

うわー、ここの人々は速すぎますが、念のためにコードを投稿します。ここに2つの可能な解決策があります.1つ目はより良いものです（他の投稿が示しているように）：

<!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 に答える
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 に答える