如何并排放置两个下拉菜单？答案

【问题标题】：How can I position two dropdown's side by side?如何并排放置两个下拉菜单？
【发布时间】：2020-09-07 17:26:33
【问题描述】：

我正在学习 HTML 并尝试制作表单。我现在的问题是并排设置两个下拉列表，而不是一个在另一个之上。这是代码（我删除了不必要的代码，但如果您认为我应该提供它，请告诉我）：

body {margin:0; background-color:rgb(56, 0, 121)}

.org-bar {
    margin: 10%;
    width: 400px;
    background-color: rgba(255, 255, 255, 1);
    overflow: hidden;
    border-radius: 15px 15px 15px 15px;
    padding: 16px;
}

.textInput {
    margin-top: 20px;
    font-size: 15px;
    padding: 10px;
    width: 250px;  
}

.org-bar h1 {
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: rgb(0, 0, 0);
    font-size: 27px;
    text-transform: uppercase;
    font-family: 'Arial'
}

.org-bar label {
    display: block;
    text-align: left;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
}

<!DOCTYPE html>
<html>
    <head><link rel="stylesheet" href="common.css"></head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <div class="org-bar">
            <h1>Panel</h1>
            <form>
                <label for="orgType"></label>
                <select name="orgType" id="orgType">
                    <option disabled="disabled" selected="selected">Type</option>
                    <option value="gang">1</option>
                    <option value="terrorist">2</option>
                </select>
                <label for="orgStyle"></label>
                <select name="orgStyle" id="orgStyle">
                    <option disabled="disabled" selected="selected">Style</option>
                    <option value="gang">1</option>
                    <option value="classic">2</option>
                </select>
                <button class="btn btn--radius btn--green" type="submit">Search</button>
            </form>
        </div>
    </body>
</html>

这是表格：

这就是我想要做的（不要太在意测量和定位）：

【问题讨论】：

every-layout.dev 从这里开始。这是一个很好的布局资源。
已经付钱了 ::
（点击菜单项，有些是免费的，而且互相支持也不错）---还有csslayout.io，但不利于无障碍

标签： javascript html css forms

【解决方案1】：

你可以试试这段代码。

您必须在 div 中包装两个 select 和 label 元素，并将 display:flex 应用到父元素中。

body {margin:0; background-color:rgb(56, 0, 121)}
form{
    display: flex;
    flex-direction: column;
    align-items: center; 
}
.form-control{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.form-group{
    padding: 0px 10px;
}
.org-bar {
    margin: 10%;
    width: 400px;
    background-color: rgba(255, 255, 255, 1);
    overflow: hidden;
    border-radius: 15px 15px 15px 15px;
    padding: 16px;
}

.textInput {
    margin-top: 20px;
    font-size: 15px;
    padding: 10px;
    width: 250px;  
}

.org-bar h1 {
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: rgb(0, 0, 0);
    font-size: 27px;
    text-transform: uppercase;
    font-family: 'Arial'
}

.org-bar label {
    display: block;
    text-align: left;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
}

.org-bar 

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

.active {
  background-color: rgba(0, 140, 255, 1);
}

.icon-bar a:hover {
  background-color: rgba(0, 140, 255, 0.5);
}

<html>
    <head><link rel="stylesheet" href="common.css"></head>
    <body>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <div class="org-bar">
            <h1>Panel</h1>
            <form>
              <div class="form-control">
                <div class="form-group">
                  <label for="orgType"></label>
                  <select name="orgType" id="orgType">
                      <option disabled="disabled" selected="selected">Type</option>
                      <option value="gang">1</option>
                      <option value="terrorist">2</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="orgStyle"></label>
                  <select name="orgStyle" id="orgStyle">
                      <option disabled="disabled" selected="selected">Style</option>
                      <option value="gang">1</option>
                      <option value="classic">2</option>
                  </select>
                </div>
              </div>
                <button class="btn btn--radius btn--green" type="submit">Search</button>
            </form>
        </div>
    </body>
</html>

【讨论】：

我的面板实际上有更多的东西，所以它会得到所有的错误。
好的，我会更新主要内容的源代码
谢谢！我不知道哪个更好，是你的还是其他人，但我现在会和你一起去。

【解决方案2】：

在这里我添加了答案。我在div 中包裹了两个select 元素，在div 中也包裹了按钮。按预期使用 float:left 对齐。

body {margin:0; background-color:rgb(56, 0, 121)}

.org-bar {
    margin: 10%;
    width: 400px;
    background-color: rgba(255, 255, 255, 1);
    overflow: hidden;
    border-radius: 15px 15px 15px 15px;
    padding: 16px;
}

.textInput {
    margin-top: 20px;
    font-size: 15px;
    padding: 10px;
    width: 250px;  
}

.org-bar h1 {
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: rgb(0, 0, 0);
    font-size: 27px;
    text-transform: uppercase;
    font-family: 'Arial'
}

.org-bar label {
    display: block;
    text-align: left;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
}
.form-element{
float:left;
width:50%
}
.button-div{ 
width:80px;
margin-left:auto;
margin-right:auto;
padding-top:30px;
} 
.form-element #orgType{
float:right;margin-right:10px;
}

<!DOCTYPE html>
<html>
    <head><link rel="stylesheet" href="common.css"></head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <div class="org-bar">
            <h1>Panel</h1>
            <form>
                <div class="form-element">
                <label for="orgType"></label>
                <select name="orgType" id="orgType">
                    <option disabled="disabled" selected="selected">Type</option>
                    <option value="gang">1</option>
                    <option value="terrorist">2</option>
                </select>
                </div>
                <div class="form-element">
                <label for="orgStyle"></label>
                <select name="orgStyle" id="orgStyle">
                    <option disabled="disabled" selected="selected">Style</option>
                    <option value="gang">1</option>
                    <option value="classic">2</option>
                </select>
                </div>
                <div class="button-div">
                <button class="btn btn--radius btn--green" type="submit">Search</button>
                </div>
            </form>
        </div>
    </body>
</html>

【讨论】：

怎样才能使它们居中？？
将元素添加到中心。 @雨果阿尔梅达

【解决方案3】：

将“.org-bar label”中的“display”属性更改为“inline-block”，或者将其删除。在这两种情况下都可以使用，因为 select 是一个内联元素

【讨论】：