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

テキストの場合は、使用するのが最適ですtext-align