以下是我試圖在兩個floating div之間給小時線的小提琴。請讓我知道如何給兩個浮動div之間的響應線。兩小時之間的小時線

http://jsfiddle.net/NH5Lc/5/

<div style="display:inline-block; float: left;">Calories</div> 
<div style="inline-block"> 
    <hr class="between" /> 
</div> 
<div style="display:inline-block; float: right;">20</div> 
<br/> 
<div style="display:inline-block; float: left;">Calories</div> 
<div style="inline-block"> 
    <hr class="between" /> 
</div> 
<div style="display:inline-block; float: right;">20</div>

來源

2014-01-25 user3027531

你能做到這帶有邊框，而不是一個小時的標籤。記錄中，它會更好地使用css文件，而不是內聯樣式 –

[我怎樣才能填充左側和右側的浮動空間之間的空間，而不做正確的浮動包裝？]（http://stackoverflow.com/questions/17259220/how-can-i-fill-the-space-between-a-left-and-right-float-without-making-the-right） – flyx

@GertB。我只爲小提琴做了內聯式樣式。問題是第三個div始終走向下一行，從hr行開始的頁邊距不工作 – user3027531

可以使用flex了。 jsFiddle Live Demo

.between { 
 
     border: 3px dotted #0099CC; 
 
     margin-left:10px; 
 
     margin-right:10px; 
 
    } 
 
    .parent 
 
    { 
 
     display:-moz-box; /* Firefox */ 
 
     display:-webkit-box; /* Safari and Chrome */ 
 
     display:-ms-flexbox; /* Internet Explorer 10 */ 
 
     display:box; 
 
     width:100%; 
 
    } 
 
    .child2 
 
    { 
 
     -moz-box-flex:5.0; /* Firefox */ 
 
     -webkit-box-flex:5.0; /* Safari and Chrome */ 
 
     -ms-flex:9.0; /* Internet Explorer 10 */ 
 
     box-flex:9.0; 
 
    }

<div class='parent'> 
 
     <div class='child1'>Calories</div> 
 
     <div class='child2'> <hr class="between" /></div> 
 
     <div class='child3'>20</div> 
 
    </div> 
 
    <div class='parent'> 
 
     <div class='child1'>Calories as dasd as dasd</div> 
 
     <div class='child2'> <hr class="between" /></div> 
 
     <div class='child3'>20</div> 
 
    </div>

來源

2014-01-25 09:56:23

如果文本是總碳水化合物，它會看起來不太好。在你的小提琴中，線條不是按照文本 – user3027531

@ user3027531動態擠壓答案和小提琴更新。再次檢查。 –

<div style="border-top:1px solid black; width:100%;"></div>將做到這一點。正如Gert B.所說，儘管你應該使用鏈接文件而不是內聯樣式。在這種情況下，你會在你的CSS文件：

.line{ 
    border-top:1px solid black; 
    width:100% 
}

然後在您的標記：

<div class="line"></div>

來源

2014-01-25 09:39:21 ElendilTheTall

你可以分享我們更新的小提琴 – user3027531

粘貼類之間 .between {

width: 500px; 
float: left; 
border-right: 1px solid gray;

}

來源

2014-01-25 09:41:46

它似乎可以使用一個<table>或至少一個列表<ul>爲你正在嘗試做什麼。

通過列表，您可以使用文本對齊，浮點和僞元素。 http://codepen.io/gc-nomade/pen/Bmhqc

ul, li { 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    text-align:right; 
} 
li em { 
    float:left; 
} 
li em:after { 
    content:''; 
    border-bottom:dotted; 
    width:2000px; 
    margin-right:-2000px;/* reduce space needed to 0 */ 
    display:inline-block; 
    vertical-align:middle; 
} 
li, span { 
    background:white; 
    overflow:hidden; /* hide pseudo line overflow */ 
}

<ul> 
    <li><em>calorie</em><span>20</span></li> 
    <li><em>calorie</em><span>20</span></li> 
    <li><em>calorie</em><span>20</span></li> 
    <li><em>calorie</em><span>20</span></li> 
</ul>

來源

2014-01-25 09:50:12

我正在使它響應如此寬'2000px'將不適用於我 – user3027531

你有沒有試過？並理解負邊距的目的？ –

的Html

<div id="outer"> 
    <div id="left">Calories</div> 
    <div id="middle"> 
     <hr class="between" /> 
    </div> 
    <div id="right">20</div> 
</div> 

<br> 
    <br> 
    <div id="outer"> 
    <div id="left">Calories</div> 
    <div id="middle"> 
     <hr class="between" /> 
    </div> 
    <div id="right">20</div> 
</div>

CSS

#outer { 
    display:block; 
    width: 100%; 
} 
#left { 
    width: 100px; 
    float: left; 
    text-align:center; 
} 
#right { 
    width: 200px; 

    float: right; 
    text-align:center; 
} 
#middle { 

    float: left; 
} 
.between { 
    border: 3px dotted #0099CC; 
    width:200px; 
    margin-left:10px; 
    margin-right:10px; 
}

輸出：

enter image description here

Working fiddle

來源

2014-01-25 09:56:11

兩小時之間的小時線

回答

Working fiddle

相關問題