两个div之间的hr线

Question

以下是我的小提琴，我试图在两个floating div之间给出hr线。请告诉我如何在两个浮动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>

Answer 1

在课间粘贴你 .between {

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

}

Answer 2

您也可以使用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>

Answer 3

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

Answer 4

您似乎可以使用<table>或至少列表<ul>来表达您的目标。

使用列表，您可以使用text-align，float和pseudo-element。 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>

Answer 5

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

<强>输出：

Working fiddle