如何在父字段集內對齊子字段集？

我想對齊兩個fieldset offer &需要在父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>

來源

2016-01-28 MGZ

由於您已將自己的字段集合到列表中，因此您應該將注意力集中在ul和li之間。我清理了所有無關的樣式。 display: flex是什麼使這個佈局問題變成了一個cakewalk。以下是改變相關的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。

來源

2016-01-28 08:58:18 zer00ne

它在Adobe Dreamweaver CS6中不起作用。可能是它不明白「顯示：彎曲;」 – MGZ

@MansourGHAFFARZADEH我自己使用DWCS6，但使用什麼編輯器並不重要，它取決於用戶將使用的瀏覽器。它將在Firefox，Chrome，IE 10+和Safari中運行。 http://caniuse.com/#feat=flexbox – zer00ne

@MansourGHAFFARZADEH使用DWCS6測試的最佳方法是使用瀏覽器功能進行測試。如果您看到地球圖標，請在工具欄上使用該圖標。如果您過分依賴設計模式，則永遠無法獲得準確的渲染效果。 Adobe已經放棄了DWCS6，因此它不會得到任何更新。 – zer00ne

試試這個

<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>

來源

2016-01-28 08:15:53

您可以添加特定的寬度「.LIST 」（例如：100％），並用具體到「 .subheader」元素（除去明確的：無論是從它）。儘量不要使用display：inline-block並同時浮動。

來源

2016-01-28 08:23:29 sTx

如何在父字段集內對齊子字段集？

回答

相關問題