使用CSS在同一条线中的两个DIV

Question

我想在同一行中制作两个DIV标签。我尝试使用CSS属性，例如Display：inline。但它不起作用。我希望两个下拉框以同一行显示。这是代码

<div id="block1">
            <label>Select State</label>
            <div class="styled-select green rounded" style="width: 10%; margin-bottom: 2vw;">
                <select class="dropdown-toggle" ng-model="selectedState"
                        ng-options="item for item in states | orderBy:'toString()'"
                        ng-change="stateChanged(selectedState)">
                    <option>State</option>
                </select>
            </div>
        </div>
        <div id="block2" ng-show="showSecondDropDown">
            <label>Select County</label>
            <div class="styled-select green rounded" style="width: 10%">
                <select ng-model="selectedCounty"
                        ng-options="arr.countyName for arr in countyList | orderBy:'countyName' track by arr.countyId "
                        ng-change="tp(selectedCounty)">
                </select>
            </div>
        </div>

这是CSS

.styled-select {
    background:
            url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
    height: 29px;
    overflow: hidden;
    width: 240px;
}
.rounded {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.green   { background-color: #779126; }
.styled-select select {
    background: transparent;
    border: none;
    font-size: 14px;
    height: 29px;
    padding: 5px;
    width: 268px;
}
#block1, #block2{
    display: inline;
}

Answer 1

您可以通过将它们包裹到container中并这样应用display:flex（我还删除了一些无用的内联样式），可以使用 flex ：

.styled-select {
  background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
  height: 29px;
  overflow: hidden;
  width: 240px;
}
.rounded {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.green {
  background-color: #779126;
}
.styled-select select {
  background: transparent;
  border: none;
  font-size: 14px;
  height: 29px;
  padding: 5px;
  width: 268px;
}
.container {
  display: flex;
}
#block1,
#block2 {
  flex: 1;
}

<div class=container>
  <div id="block1">
    <label>Select State</label>
    <div class="styled-select green rounded" style=" margin-bottom: 2vw;">
      <select class="dropdown-toggle" ng-model="selectedState" ng-options="item for item in states | orderBy:'toString()'" ng-change="stateChanged(selectedState)">
                    <option>State</option>
                </select>
    </div>
  </div>
  <div id="block2" ng-show="showSecondDropDown">
    <label>Select County</label>
    <div class="styled-select green rounded">
      <select ng-model="selectedCounty" ng-options="arr.countyName for arr in countyList | orderBy:'countyName' track by arr.countyId " ng-change="tp(selectedCounty)">
                </select>
    </div>
  </div>
</div>

或简单地使用inline-block而不添加新Div：

.styled-select {
  background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
  height: 29px;
  overflow: hidden;
  width: 240px;
}
.rounded {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.green {
  background-color: #779126;
}
.styled-select select {
  background: transparent;
  border: none;
  font-size: 14px;
  height: 29px;
  padding: 5px;
  width: 268px;
}
#block1,
#block2 {
  display:inline-block;
  vertical-align:top;
}

<div id="block1">
    <label>Select State</label>
    <div class="styled-select green rounded" style=" margin-bottom: 2vw;">
      <select class="dropdown-toggle" ng-model="selectedState" ng-options="item for item in states | orderBy:'toString()'" ng-change="stateChanged(selectedState)">
                    <option>State</option>
                </select>
    </div>
  </div>
  <div id="block2" ng-show="showSecondDropDown">
    <label>Select County</label>
    <div class="styled-select green rounded">
      <select ng-model="selectedCounty" ng-options="arr.countyName for arr in countyList | orderBy:'countyName' track by arr.countyId " ng-change="tp(selectedCounty)">
                </select>
    </div>
  </div>

Answer 2

使用：

float: left;

在CSS中，它们将彼此对齐。喜欢：

#block1, #block2{
    display: inline;
    float: left;
}