使用css

Question

我有两个css类来控制asp.net中动态创建的控件。我想要做的是使用以下css正确显示动态创建的控件。我在本期中使用以下css作为截图附加了我当前的行为。我真的很感激这个css问题的任何帮助。我想要显示的是左侧的标签和右侧的文本框/下拉列表。像label：Textbox这样的东西。

.form-control{
    width:300px;
    float:left;
    margin:10px;
}

.form-control-label{
    clear:left;
    float:left;
    width:350px;
    text-align:left;
    margin:10px;
}

.form-control-dropdown {
    float: left;
    width: 305px;
    text-align: left;
    margin: 10px;
}    

Answer 1

＆＃13;

＆＃13;

.form-control{
  width:300px;
  margin:10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between; 
}

.form-control label{
  flex-basis: 50%;
  flex-shrink: 0;
}

.form-control input, .form-control select{
  flex-basis: 50%;
  flex-shrink: 0;
}

＆＃13;

<form>
  <div class="form-control">
    <label>Select an End of the Month Date:</label>
    <input type="text">
  </div>
  <div class="form-control">
    <label>State:</label>
    <select></select>
  </div>
  <div class="form-control">
    <label>Agency List:</label>
    <select></select>
  </div>
  <div class="form-control">
    <label>Company:</label>
    <select></select>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将标签和控件包裹在p元素中，如下所示：
How to structure an HTML form

＆＃13;

＆＃13;

<form>
  <p>
    <label>Select an End of the Month Date: <input type="text"></label>
  </p>
  <p>
    <label>State: <input type="text"></label>
  </p>
  <p>
    <label>Agency List: <input type="text"></label>
  </p>
  <p>
    <label>Company: <input type="text"></label>
  </p>
</form>

＆＃13;

＆＃13;

＆＃13;