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

＆＃13;

.first_section label {
    float: left;
    width: 30%;
}

.first_section select {
    width: 40%;
}

.first_section img {
    float: right;
}

＆＃13;

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

＆＃13;

Answer 2

是的，您使用的是无效的属性。没有position:center;等，只有这个：

position:relative;
position:absolute;
position:fixed;

您需要设置每个项目的位置absolute，然后添加他们的right和left属性来定位它们。
这是一个例子：

position:absolute;
left:0;

position:absolute;
right:0;

position:absolute;
left:50%;
margin-left:-(half the elements width)px

您也可以尝试使用display:flex;，但这不是旧浏览器的最佳选择。

如果您不希望该项目位于display:inline-block;，则

absolute将有效。

将HTML元素与CSS对齐

2 个答案: