浮动元素下元素的位移

有人可以解释为什么浮动元素下面的元素会移动，就好像它有浮动元素的宽度的填充一样？浮动元素下元素的位移

HTML：

<div class="filter"> 
<div class="filterTitle">Filters</div> 
<form id="filterForm" method="post" action=""> 
    <div> 
     <label for="dateFrom" class="optional">Date</label> 
     <input type="text" name="dateFrom" id="dateFrom" value=""> 
    </div> 
</form>

CSS：

div.filter { border: 1px solid #aaaaaa; padding: 0 10px 10px 10px; width: 300px;} 
    div.filterTitle { float:left; padding: 5px; margin:-12px 0 0 10px; background:#fff; } 
    div.filter label { display:inline-block; width: 120px; font-weight: bold; margin-top: 15px;} 
    div.filter input[type="text"] { width: 146px; }

FIDDLE：jsFiddle

来源

2015-02-24 DeadMoroz

能否请您解释一下什么是你想要的预期的行为？在Chrome上似乎没问题 – Jaay 2015-02-24 12:34:07

您应该在这里使用'legend'元素...可能会让事情变得更简单。 – 2015-02-24 12:34:26

这两个元素都应该显示在一行上，标签应该按照CSS – DeadMoroz 2015-02-24 12:36:03

目前还不清楚你问什么，但根据意见，我认为这只是清理浮动的情况。

/* filters menu */ 
 
div.filter { 
 
    border: 1px solid #aaaaaa; 
 
    padding: 0 10px 10px 10px; 
 
    width: 300px; 
 
} 
 
div.filterTitle { 
 
    float:left; 
 
    padding: 5px; 
 
    margin:-12px 0 0 10px; 
 
    background:#fff; 
 
} 
 
form { 
 
    clear: both; 
 
} 
 
div.filter label { 
 
    display:inline-block; 
 
    width: 120px; 
 
    font-weight: bold; 
 
    margin-top: 15px; 
 
} 
 
div.filter input[type="text"] { 
 
    width: 146px; 
 
}

<div class="filter"> 
 
    <div class="filterTitle">Filters</div> 
 
    <form id="filterForm" method="post" action=""> 
 
     <div> 
 
      <label for="dateFrom" class="optional">Date</label> 
 
      <input type="text" name="dateFrom" id="dateFrom" value=""/> 
 
     </div> 
 
    </form> 
 
</div>

你也可能想看看进入fieldset和legend元素这似乎更内嵌在看你似乎是瞄准。

Fieldset @ MDN

Quick JSfiddle Demo

来源

2015-02-24 12:40:30

中描述的10px填充符的左边缘放置，这正是我所需要的，非常感谢！ – DeadMoroz 2015-02-24 12:43:36

页面上会有更多模仿“fieldset/legend”外观的元素，它们不是表单。不知道在所有情况下使用它是否正确。 – DeadMoroz 2015-02-24 12:50:53

浮动元素下元素的位移

回答

相关问题