2017-05-09 47 views
0

我在本網站上找到了有關在字段集中從邊界移動圖例到內部字段集的解決方案。 http://codepen.io/vkjgr/pen/oFdBa當我想要做到這一點時,我應該在圖例上使用浮動左邊的樣式,但是我應該在圖例之後使用清晰的圖案?此解決方案適用於所有瀏覽器?當我想要清潔時,我必須只使用兩者都清楚?字段集內的圖例和清除左邊的浮點數

<fieldset> 
<legende> xyz </legend> 
<div style="clear: both;"</div> 
// 
// Other divs and inputs 

+0

只是給你'legend'標籤的'100%'一個'width'; –

+0

好的,這個標籤清除所有浮動問題?當我設置這個標籤時,下一個div將在傳說之下,但下一個div是什麼魔女?真的,我不需要清楚? – Kewin

+0

是的,如果你給全長'legend「,那麼'clear:both'甚至不是必要的,因爲沒有空間讓圖例下面的內容流向 –

回答

0

如果你想按照自己的方式,它也可以如下圖所示。否則,width:100%legend也會這樣做。

fieldset { 
 
    padding: 2em; 
 
} 
 

 
legend { 
 
    float: left; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}
<fieldset> 
 
    <legend> 
 
    Hello 
 
    </legend> 
 
    <div class="clear"> 
 

 
    </div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque sunt ad facilis fugiat perferendis et fugit quas, accusantium, quod atque provident natus facere animi sed accusamus qui doloribus illo nesciunt. 
 
    </p> 
 
</fieldset>