两个div在同一行使用css

Question

我想在同一行中制作两个div标签。我尝试使用css属性，如display：inline.But它不起作用。我希望两个下拉框显示在同一行。这是代码

<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

您可以使用 flex 将它们简单地包装到container并像这样应用display:flex（我还删除了一些无用的内联样式）：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者只使用inline-block而不添加新的div：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用：

float: left;

在CSS中

它们将彼此相邻。像这样：

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