Html 水平对齐选择框_Html_Css_Alignment

Html 水平对齐选择框

html css

Html 水平对齐选择框,html,css,alignment,Html,Css,Alignment,我试图在某种程度上对齐选择框，这样它看起来就不会那么交错了。它们都不必对齐，但如果它们对齐得很近就好了。我更喜欢用html来做这件事。我找到了这条线，但没有多少：这里有一个提琴的例子： <body> <form> <div id="test" class="page four"> <fieldset class="wrapSection"> <legend><b>Config</b

我试图在某种程度上对齐选择框，这样它看起来就不会那么交错了。它们都不必对齐，但如果它们对齐得很近就好了。我更喜欢用html来做这件事。我找到了这条线，但没有多少：

这里有一个提琴的例子：

<body>
 <form>
    <div id="test" class="page four">
     <fieldset class="wrapSection">
        <legend><b>Config</b></legend>
        <div id="blank"><div class="leftcolumn" style="display: inline"><b>Select 1: </b></div><span><select id="select_1"></select></span></div>
        <div id="select_2_div"><div class="leftcolumn" style="display: inline"><b>On Select 2: </b></div><span><select id="select_2"></select></span></div>
        <div id="select_3_div"><div class="leftcolumn" style="display: inline"><b>Mot Select 3: </b></div><span><select id="select_3"></select></span></div>
        <div id="select_4_div"><div class="leftcolumn" style="display: inline"><b>Really Long Label:</b></div><span><select id="select_4"></select></span></div>
        <div id="select_5_div"><div class="leftcolumn" style="display: inline"><b>Short: </b></div><span><select id="select_5"></select></span></div>
     </fieldset>
    </div>
 </form>
</body>


配置
选择1：
在选择2时：
Mot选择3：
很长的标签：
简称：

您可以通过使字段集中的每个“行”显示为：flex并为选择框容器留出

左边距：auto

来实现这一点：

fieldset>div:not（图例）{
显示器：flex；
}
字段集>div:not（图例）>*：第n个子项（2）{
左边距：自动；
}


配置
选择1：
在选择2时：
Mot选择3：
很长的标签：
简称：

您需要将那些

.leftcolumn

元素从

display:inline

更改为

display:inline block

。然后您可以对其应用

宽度

（这对

内联

元素无效，但对内联块有效），这将使其看起来符合您的需要：

.leftcolumn{
显示：内联块；
宽度：160px；
}


配置
选择1：
在选择2时：
Mot选择3：
很长的标签：
简称：

将父div和wrapperSection类设置为display:flex，如果要水平对齐，还可以将flex方向设置为rows；如果要垂直对齐，还可以将flex方向设置为column。我还发现这个链接很有用，我希望这有帮助。通常，当这些框被设置在div元素上时，这个元素具有“block”元素的属性。否则，将内容显示为块。我希望这对您有所帮助？

以下是一些示例代码，其中介绍了布局选择框的典型方法。争论的焦点是哪一个最好，但我认为第一个选项最适合小屏幕，而最后一个选项最容易在桌面上扫描（但许多设计师不喜欢交错的左边缘）。列示例使用flex，但也可以使用表或其他布局css来实现（除了#2-flex是唯一可以轻松实现这一点的方法）

表单{
边缘底部：32px；
}
挑选{
宽度：100%；
高度：32px；
填充：8px 4px；
边缘底部：8px；
}
.表格组{
边缘底部：10px；
}
标签{
字体大小：粗体；
}
.并排变化.组成小组{
显示器：flex；
}
.并排变化的标签{
空白：nowrap；
线高：32px；
右边距：15px；
}
.并排固定。形成组{
显示器：flex；
}
.并排固定标签{
空白：nowrap；
线高：32px；
宽度：210px；
}
.并排固定右侧。形成组{
显示器：flex；
}
.并排固定右侧标签{
空白：nowrap；
线高：32px；
宽度：210px；
文本对齐：右对齐；
右边距：15px；
}


配置
选择1：
选择一个。。。
在选择2时：
选择一个。。。
Mot选择3：
选择一个。。。
很长的标签：
选择一个。。。
简称：
选择一个。。。
配置
选择1：
选择一个。。。
在选择2时：
选择一个。。。
Mot选择3：
选择一个。。。
很长的标签：
选择一个。。。
简称：
选择一个。。。
配置
选择1：
选择一个。。。
在选择2时：
选择一个。。。
Mot选择3：
选择一个。。。
很长的标签：
选择一个。。。
简称：
选择一个。。。
配置
选择1：
选择一个。。。
在选择2时：
选择一个。。。
Mot选择3：
选择一个。。。
很长的标签：
选择一个。。。
简称：
选择一个。。。
配置
选择1：
选择一个。。。
在选择2时：
选择一个。。。
Mot选择3：
选择一个。。。
很长的标签：
选择一个。。。
简称：
选择一个。。。