1

見出しの真ん中に縦に線を入れたいのですが、右側に別のdivを追加したいです。見出しの真ん中に線を設定できますが、右側のスパンにスタイルを追加すると、線が真ん中になくなります。

編集: 問題は Firefox にあります。Chromeで問題なく動作します。

添付の画像をご覧ください：

ここに画像の説明を入力

これが私が試していることです：

HTML:

<div class="box"> 
    <h2><span class="text">Hello world</span><span class="right"></span></h2>
</div>

CSS:

h2 {   
   border-bottom: 1px solid #000; 
    line-height: 0.1em; 
    margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

span.right{
    background: green;
    width: 30px;
    height: 30px;
    display: block;
    float: right;
    margin-top: -5px;
}

デモ: http://jsfiddle.net/RecUE/

4

4 に答える 4

2

あなたの問題はフローティングにありました。この更新されたデモをチェックしてください。

.box{
    width: 500px;
    margin-top: 30px;
}

h2 .text {
    background-color:white;
    height: 10px; 
}

h2 {   
   border-bottom: 1px solid #000; 
    line-height: 0; 
    margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
    float:left; 
}

span.right{
    background: green;
    width: 30px;
    height: 30px;
    display: inline-block;
    float: right;
    margin-top: -15px;
}

デモ

于 2013-09-30T09:29:12.103 に答える
1

このフィドルを試してください、私はあなたのhtmlとcssを編集しました

.line {
    float:left;
    min-width:400px;
    border-bottom:1px solid black;
    height: 10px;
}
于 2013-09-30T09:42:30.520 に答える
0

これを試して：

span.right{
    background: green;
    width: 30px;
    height: 30px;
    display: block;
    float: right;
    margin-top: -15px;
}
.text{
    float: left;
    display: block;
    height: 30px;
}

デモ

于 2013-09-30T09:41:42.227 に答える