How to align the children fieldset inside the parent fieldset?
Question
I want to align two fieldset offer & Demand inside the parent fieldset type. How to do for a simple case provided below? It includes both html & css.
I am using um-ordered list inside the parent fieldset. But the alignment does not work. Thank you in advance for your help.
<!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>
3 answers
solution1
0 2016-01-28 08:15:53
try this
<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>
solution2
0 2016-01-28 08:23:29
You can add a specific width to ".list"(ex:100%) and specific with to ".subheader" elements(remove clear:both from it). Try to not use display:inline-block and float at same time.
solution3
0 ACCPTED 2016-01-28 08:58:18
Since you have wrapped your fieldsets into a list, you should focus your attention to the ul and li . I cleaned out all of the extraneous styles. display: flex is what made this layout problem a cakewalk. The following is the relevant CSS that was changed:
.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 to utf-8 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.