Question

如何使用CSS实现此视图：

------------------ TITLE

或

TITLE ------------------

我有

<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;
}

DEMO

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

在Horizontal Line in Background using Css3

中查看我的答案

你可以使用像这样的1％渐变

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

您将额外的跨度与组件的背景颜色相同，以使其看起来像已删除＆＃34;这条线在文本后面。

Answer 6

对于文字，最好使用text-align

CSS水平居中线

6 个答案: