Как расположить линию под группой тегов?

Question

Я пытаюсь расположить горизонтальную линию под группой тегов в приложении на asp.net mvc. Я считаю, что я должен сделать это на CSS, но я просто не могу найти правильный способ разместить такую ​​строку. Каждый раз, когда я пытаюсь, строка заканчивается справа от тегов, и я не чувствую, что использование целой связки
- правильный путь.

<div id="section">
    <div style="float:left; margin:20px">
        <img alt="Upload" src="/Content/Images/Upload_yellow.png"/>
        <img alt="Confirm" src="/Content/Images/Confirm_white.png"/>
        <img alt="Review" src="/Content/Images/Review_white.png"/>
    </div>
    <hr />

</div>

Может кто-нибудь сориентировать меня здесь в правильном направлении?

Answer 1

Откажитесь от <hr /> и добавьте это изменение вашего правила CSS в <div style="float:left; margin: 20px; border-bottom: 1px solid #000;">

Если у вас есть несколько плавающих элементов div в разделе div, поместите правило границы на него, если вы хотите, чтобы оно расширялось до конца, и задайте либо overflow:hidden;, либо overflow:auto, чтобы оно не разрушалось (какие контейнеры делают когда они содержат только плавающие элементы, если не установлено переполнение). Таким образом, вы можете избежать установки правила clear или добавления дополнительной разметки для строки.

Answer 2

<hr style="clear: left" />

Answer 3

Джефф и Джоэл говорили об этом в Podcast # 4 . В частности, экстремисты CSS предпочли бы, чтобы вы делали это в CSS, но практические проблемы перевешивают это. Держи его там, где сейчас.