CSS水平居中線

Question

如何使用CSS實現此視圖：

- - - - - - - - - 標題

要么

標題 - - - - - - - - -

我有

<div id="titleBlock">
   <div id="title">Some text</div>
   <div id="titleLine"></div>
</div>

我的風格是：

#titleLine {
    border-top: 1px solid black;
    width: 84%;
    clear: both;
    height: 20px;
}

#title {
    height: 10px;
    float: right;
}

我的方法是在這里： jsFiddle

但是，線寬是用百分比定義的，我需要使用CSS自動調整。

Answer 1

這可能是您想要的： http : //jsfiddle.net/XpSWX/1/

Answer 2

希望這可以幫助

<div id="titleBlock">
    <div id="title">Some text</div>
    <div id="titleLine"></div>
</div>​

#titleLine {
    border-top: 1px solid black;
    width: 84%;
    float:left;
    height: 20px;
    margin-top:8px;
}

#title {
    height: 10px;
    float: right;
}​

http://jsfiddle.net/sY2SV/1

<div id="titleBlock">
    <div id="title">Some text</div>
    <div id="titleLine"></div>
</div>​

#titleLine {
    border-top: 1px solid black;
    width: 84%;
    float:right;
    height: 20px;
    margin-top:8px;
}

#title {
    height: 10px;
    float: left;
}​

http://jsfiddle.net/sY2SV/2

Answer 3

這是一個解決方案：

#titleBlock {
    width:100%;
}


#titleLine {
    background:black;
    position:absolute;
    z-index:1;
    left:0px;
    top:14px;
    width:100%;
    height: 1px;
}

#title {
    display:inline-block;
    padding:4px;
    background:white;
    position:relative;
    z-index:2;
    /* Only variable to change... Just say left and it woulb be title------- */
    float:right;
}​​​​

演示

Answer 4

嘿，現在你可以用這個了

的HTML

<div class="hello"><span>Hello i m sony</span></div>

的CSS

.hello{
background:green;
  text-align:left;
  position:relative;

}
.hello span{
  padding-right:10px;
background:green;
  display:inline-block;
  position:relative;
  z-index:1
}
.hello:after{
content:'';
  border-top:solid 5px red;
  position:absolute;
 right:0;
  left:0;
  top:7px
}

現場演示

http://tinkerbin.com/1guJzKcI

Answer 5

使用Css3在背景中的水平線上檢查我的答案

您可以像這樣以1％的梯度進行

.datedAside {
     background: linear-gradient(0deg, transparent 49%, #000 50%, transparent 51%);
}
.datedAside span{
     background: #FFF;
     padding: 0 0.5rem;
}

您需要將多余的跨度設置為與組件的背景相同的背景色，以使其看起來像“刪除”了文本后面的行。

Answer 6

對於文本，最好使用text-align