浮動元素下元素的位移

有人可以解釋爲什麼浮動元素下面的元素會移動，就好像它有浮動元素的寬度的填充一樣？浮動元素下元素的位移

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

浮動元素下元素的位移

回答

相關問題