css - 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