html - 将 HTML 元素与 CSS 对齐

Question

我必须设计一个简单的 HTML 文档。两个标签必须位于左侧，下拉框必须居中，图像必须位于右侧。到目前为止，我已经试过了，但它不能正常工作。总有一个元素没有正确对齐。请帮我？提前致谢。

.fist_section label {
  position: left
    width: 30%;
}

.fist_section select {
  position: center;
  width: 40%;
}

.first_section img {
  float: right;
}

<form>
  <div class="first_section">
    <img src="../img/img.jpg">
    <label>Automobile:</lable>
    <select class="fist_section_dropdown">
      <option value="bmw">BMW</option>
    </select>		
    <br>	
    <label>Automobile:</label>
    <select class="fist_section_dropdown">
      <option value="mercedes">Mercedes</option>
    </select>
  </div>
</form> 

Answer 1

此处错别字太多，例如.fist_section应该是 .first_section , <\lable>应该是 </label> , 等等。

position不用于对齐，而是用于定义 absolute或 relative定位。你真正需要在这里写的是 float: left; .

.first_section label {
    float: left;
    width: 30%;
}

.first_section select {
    width: 40%;
}

.first_section img {
    float: right;
}

<form>
  <div class="first_section">
    <img src="../img/img.jpg">
    <label>Automobile:</label>
    <select class="first_section_dropdown">
      <option value="bmw">BMW</option>
    </select>		
    <br>	
    <label>Automobile:</label>
    <select class="first_section_dropdown">
      <option value="mercedes">Mercedes</option>
    </select>
  </div>
</form>