Ниже приведена моя скрипка, в которой я пытаюсь дать hr-строку между двумя floating div. Пожалуйста, дайте мне знать, как я могу дать ответную линию между двумя плавающими div.hr line между двумя divs

<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> будет делать это. Как говорит Герт Б., вы действительно должны использовать связанный файл, а не встроенные стили. В этом случае, вы бы в вашем файле 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

hr line между двумя divs

ответ

Working fiddle

Смежные вопросы