Question

我想将左边的一个标签和右边的标签对齐。但不是使用align-left或align-right。我希望能够用正确的东西来控制它：10px或者左：10px。我无法提出一个干净的解决方案。

＆＃13;

.Div1 {
  width: 100%;
  height: 500px;
  background-color: rgb(199, 57, 57);
  position: relative;
}

.Div1_1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 100px;
  left: 10px;
  top: 10px;
  background-color: rgb(60, 172, 66);
  text-align: center;
}

＆＃13;

<div class="Div1">
  <div class="Div1_1">
    <label style="top:20px; position: relative">Center This</label>
    <br>
    <label style="top:40px; position: relative">Left 10px This</label>
  </div>
  <div class="Div1_1">
    <label style="top:20px; position: relative">Center This</label>
    <br>
    <label style="top:40px; position: relative">Right 10px This</label>
  </div>
</div>

＆＃13;

Answer 1

仅使用padding：

就可以轻松实现

＆＃13;

.Div1 {
  width: 100%;
  height: 500px;
  background-color: rgb(199, 57, 57);
  position: relative;
}

.Div1_1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 100px;
  left: 10px;
  top: 10px;
  background-color: rgb(60, 172, 66);
}

label {
  display: block;
  padding: 0 10px;
  box-sizing: border-box;
}

＆＃13;

<div class="Div1">
  <div class="Div1_1">
    <label style="text-align: center;">Center This</label>
    <br>
    <label style="text-align: left;">Left 10px This</label>
  </div>
  <div class="Div1_1">
    <label style="text-align: center;">Center This</label>
    <br>
    <label style="text-align: right;">Right 10px This</label>
  </div>
</div>

＆＃13;

旧答案

您可以使用display: flex;和justify-content: space-between;：

＆＃13;

.Div1 {
  width: 100%;
  height: 500px;
  background-color: rgb(199, 57, 57);
  position: relative;
  display: flex;
}

.Div1_1 {
  position: relative;
  display: flex;
  width: 200px;
  height: 100px;
  left: 10px;
  top: 10px;
  background-color: rgb(60, 172, 66);
  text-align: center;
  justify-content: space-between;
  margin-right: 10px;
  padding: 0 10px;
  box-sizing: border-box;
}

.Div1_1 label {
  
}

＆＃13;

<div class="Div1">
  <div class="Div1_1">
    <label style="">left</label>
    <br>
    <label style="">right</label>
  </div>
  <div class="Div1_1">
    <label style="">left</label>
    <br>
    <label style="">right</label>
  </div>
</div>

＆＃13;

修改

要添加空格，只需添加一些填充，例如padding: 0 10px;。

Answer 2

位置相对，左：-10px;左右拉：-10px;向右拉另一个

＆＃13;

.Div1 {
  width: 100%;
  height: 500px;
  background-color: rgb(199, 57, 57);
  position: relative;
}

.Div1_1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 100px;
  left: 10px;
  top: 10px;
  background-color: rgb(60, 172, 66);
  text-align: center;
}

＆＃13;

<div class="Div1">
  <div class="Div1_1">
    <label style="top:20px; position: relative">Center This</label>
    <br>
    <label style="top:40px; left: -10px; position: relative">Left 10px This</label>
  </div>
  <div class="Div1_1">
    <label style="top:20px; position: relative">Center This</label>
    <br>
    <label style="top:40px; right: -10px; position: relative">Right 10px This</label>
  </div>
</div>

＆＃13;

Answer 3

也许是这样的？

.Div1 {
    width: 100%;
    height: 500px;
    background-color: rgb(199, 57, 57);
    position: relative;
}

.Div1_1 {
    position: relative;
    display: inline-block; 
    width: 200px;
    height: 100px;
    left: 10px;
    top: 10px;
    background-color: rgb(60, 172, 66);   
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="Div1">
    <div class="Div1_1">
      <label style="top:20px; position: relative">Center This</label>
      <br>
      <label style="top:40px; position: relative">Left 10px This</label>
    </div>
    <div class="Div1_1" style="position: absolute; right: 10px; left: auto;">
      <label style="top:20px; position: relative">Center This</label>
      <br>
      <label style="top:40px; position: relative">Right 10px This</label>
    </div>
  </div>
</body>

</html>

HTML / CSS标签：10px无效

3 个答案: