[英]How to align the children fieldset inside the parent fieldset?
我想在父字段集類型內對齊兩個字段集“供求”。 對於下面提供的簡單案例,該怎么辦? 它同時包含html和css。
我在父字段集中使用um-ordered列表。 但是對齊方式不起作用。 預先感謝您的幫助。
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Align Fieldset</title>
<style>
.header{
width: 100%;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.subheader{
width: 100%;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.list{
list-style-type: none;
display: inline-block;
width: auto;
float: left;
}
</style>
</head>
<body>
<p>Aligning offer & Demand on the same line</p>
<fieldset class="header">
<legend>Type</legend>
<ul class= "list">
<li>
<fieldset class="subheader">
<legend ><label>
<input type="radio" name="Type" value="Offer" checked="checked"
/>Offer</label>
</legend>
</fieldset>
</li>
<li>
<fieldset class="subheader">
<legend><label>
<input type="radio" name="Type" value="Demand">Demand</label>
</legend>
</fieldset>
</li>
</ul>
</fieldset> <!-- End of type -->
</body>
</html>
嘗試這個
<style>
.header{
width: 100%;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.subheader{
/* change */
width: auto;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.list{
list-style-type: none;
display: inline-block;
width: auto;
float: left;
}
/* add */
li{
float:left;
}
</style>
您可以為“ .list”(例如:100%)添加特定的寬度,並為“ .subheader”元素添加特定的寬度(將其清除:都清除)。 盡量不要同時使用display:inline-block和float。
由於已將字段集包裝到列表中,因此應將注意力集中在ul
和li
。 我清除了所有無關的樣式。 display: flex
是什么使此布局問題不勝枚舉。 以下是已更改的相關CSS:
.list {
list-style-type: none;
width: 100%;
display: flex;
}
.list li {
margin: 0 30px 0 0;
}
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Align Fieldset</title> <style> .header { width: 100%; } .subheader { width: 100%; font-size: medium; } .list { list-style-type: none; width: 100%; display: flex; } .list li { margin: 0 30px 0 0; } </style> </head> <body> <p>Aligning offer & Demand on the same line</p> <fieldset class="header"> <legend>Type</legend> <ul class="list"> <li> <fieldset class="subheader"> <legend> <label> <input type="radio" name="Type" value="Offer" checked="checked" />Offer</label> </legend> </fieldset> </li> <li> <fieldset class="subheader"> <legend> <label> <input type="radio" name="Type" value="Demand">Demand</label> </legend> </fieldset> </li> </ul> </fieldset> <!-- End of type --> </body> </html>
meta
更改為utf-8
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.