Question

我正在尝试创建表单，但是2个选择字段之间的间距会导致问题。我想在一行中开始时间，开始时间经络，结束时间，结束时间经络。任何帮助？提前谢谢。

我的HTML代码是：

Column 1    Column 2
            Xyz Data
            Zyx Data
            Yzx Data

我的css：

Column 1    Column 2
1           Xyz Data
2           Zyx Data
3           Yzx Data

Answer 1

如果视口宽度适应您指定的宽度，则它们在一行中。但是如果你总是希望它们在一行上，你可以将display: flex应用于父级，无论视口宽度如何，都会将它们放在一行中。

.lable_time select {
  padding: 15px 30px;
  margin: 0px 0px 0px 0px;
  width: 50%;
  font-family: 'Oxygen', sans-serif;
  color: #5585C8;
  background: white;
  border: 1px solid #2744B8;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  outline: none;
  -webkit-appearance: none;
  border-width: 0px;
}

.stime {
  margin: 30px 0px 0px 0px;
  width: 350px;
}

.stime_meridian {
  margin: 30px 10px 0px -170px;
  width: 220px;
  border-spacing: 30px 10px;
}

.time {
  margin: 30px 0px 0px -170px;
  width: 350px;
}

.time_meridian {
  margin: 30px 0px 0px -170px;
  width: 220px;
}
.lable_time {
  display: flex;
}

<div class="lable_time">
  <div class="stime">
    <select value="Start-Time">
                        <option selected  value="null">Start-Time*</option>
                        <option value="1:00">1:00</option>
                        <option value="2:00">2:00</option>

                    </select>

  </div>

  <div class="stime_meridian">
    <select value="AM-PM">
                        <option selected  value="null">AM</option>
                        <option value="PM">PM</option>
                    </select>
  </div>


  <div class="time">
    <select value="End-Time">
                        <option selected  value="null">End-Time*</option>
                        <option value="1:00">1:00</option>
                        <option value="2:00">2:00</option>

                    </select>

  </div>

  <div class="time_meridian">
    <select value="AM-PM">
                        <option selected  value="null">AM</option>
                        <option value="PM">PM</option>
                    </select>
  </div>

</div>

Answer 2

检查下面编辑代码的链接：

＆＃13;

.lable_time div{
  display:inline-block;
  width:auto;
}
.lable_time select{

    padding: 15px 30px;
    margin: 0px 0px 0px 0px;

    font-family: 'Oxygen', sans-serif;
    color:#5585C8;
     background: white;
     border: 1px solid #2744B8;
     cursor: pointer;
     font-size: 18px;
     transition: all 0.5s ease-out;
     -webkit-transition: all 0.5s ease-out;
     -moz-transition: all 0.5s ease-out;
     -ms-transition: all 0.5s ease-out;
     -o-transition: all 0.5s ease-out;
     outline:none;
     -webkit-appearance: none;
     border-width:0px;

}

.stime{    }

.stime_meridian{    }

.time{    }

.time_meridian{    }

＆＃13;

<div class="lable_time">
             <div class="stime">                  
                    <select  value="Start-Time">
                        <option selected  value="null">Start-Time*</option>
                        <option value="1:00">1:00</option>
                        <option value="2:00">2:00</option>

                    </select>

             </div>

             <div class="stime_meridian">
                    <select  value="AM-PM">
                        <option selected  value="null">AM</option>
                        <option value="PM">PM</option>
                    </select>
             </div>


              <div class="time">                  
                    <select  value="End-Time">
                        <option selected  value="null">End-Time*</option>
                        <option value="1:00">1:00</option>
                        <option value="2:00">2:00</option>

                    </select>

             </div>

             <div class="time_meridian">
                    <select  value="AM-PM">
                        <option selected  value="null">AM</option>
                        <option value="PM">PM</option>
                    </select>
             </div>

        </div>

＆＃13;

希望这有用。

如何使用CSS在2个选择字段之间放置空格？

2 个答案: