Question

我试图在左侧创建一个带标签的行，在右侧创建带有输入的两列。

你可以看到位置 y = 40输入在右边留空间，这就是我想要避免的。

what I have now

<div class="row-wrap">
    <p>Position</p>
    <div class="column-controls row-wrap">
        <div class="column-wrap">
            <input id="cx" name="cx" value="60">
            <label for="cx"> x </label>
        </div>
        <div class="column-wrap">
            <input id="cy" name="cy" value="40">
            <label for="cy"> y </label>
        </div>
    </div>
</div>

  .column-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

 .column-controls{
    width: 60%;
  }

  .column-controls input {
    width: 50%;
    text-align: center;
  }

  .row-wrap {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

由于此.column-wrap并未保持输入紧密，因此两个外部.row-wrap都不能将其更多地放在右侧（如背景输入lower）justify-content有效但.column-wrap上的这个额外空间阻止它看起来很棒。如何让这个.column-controls群组在右边？

更低我为了您的方便添加了一个片段

＆＃13;

.settings form {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.settings p {
  font-weight: 600;
}

.column-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.column-controls {
  width: 60%;
}

.column-controls input {
  width: 69%;
  text-align: center;
}

.row-wrap {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}

.heading {
  border-bottom: solid 2px green;
  padding-bottom: 5px;
}

＆＃13;

<div class="settings">
  <form>
    <p class="heading">Properties (ellipse)</p>
    <div class="row-wrap">
      <p>Position</p>
      <div class="column-controls row-wrap">
        <div class="column-wrap">
          <input id="cx" name="cx" value="60">
          <label for="cx"> x </label>
        </div>
        <div class="column-wrap">
          <input id="cy" name="cy" value="40">
          <label for="cy"> y </label>
        </div>
      </div>
    </div>
    <div class="row-wrap">
      <p>Size</p>
      <div class="column-controls row-wrap">
        <div class="column-wrap">
          <input id="rx" name="rx" value="50">
          <label for="rx"> rx </label>
        </div>
        <div class="column-wrap">
          <input id="ry" name="ry" value="50">
          <label for="ry"> ry </label>
        </div>
      </div>
    </div>
    <div class="background">
      <div class="row-wrap">
        <p> Background </p>
        <input id="fill" type="color" name="fill" value="#BDBBB8">
      </div>
    </div>
    <div class="border">
      <p>Border</p>
      <div class="row-wrap">
        <label for="stroke"> Color </label>
        <input id="stroke" type="color" name="stroke" value="#0000ff">
      </div>
      <div class="row-wrap">
        <label for="stroke-width"> Width </label>
        <input id="stroke-width" name="stroke-width" value="2">
      </div>
      <div class="row-wrap">
        <label for="stroke-dasharray"> Style </label>
        <select name="stroke-dasharray">
                    <option value="8, 10" selected="">
                        dashed
                    </option>
                
                    
                    <option value="1, 4">
                        dotted
                    </option>
                
                    
                    <option value="0">
                        solid
                    </option>
                
            </select>
      </div>
    </div>
    <input type="submit" value="save">
  </form>
</div>

＆＃13;

Answer 1

您的空间正在造成，因为您的输入宽度为69％并与单元格的中心对齐，将宽度更改为100％并且它将解决您的问题：

.column-controls input {
    width: 100%;
    text-align: center;
}

如果你想在你的柱形包装之间留一个空格，给它们添加一个最大宽度 - 在下面，我给它们最大宽度为45％

＆＃13;

.settings form {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.settings p {
  font-weight: 600;
}

.column-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width:45%;              /* add this for the gap between column-wraps */
}

.column-controls {
  width: 60%;
}

.column-controls input {
  width: 100%;               /* change this so input reaches edge of cell */
  text-align: center;
}

.row-wrap {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}

.heading {
  border-bottom: solid 2px green;
  padding-bottom: 5px;
}

＆＃13;

<div class="settings">
  <form>
    <p class="heading">Properties (ellipse)</p>
    <div class="row-wrap">
      <p>Position</p>
      <div class="column-controls row-wrap">
        <div class="column-wrap">
          <input id="cx" name="cx" value="60">
          <label for="cx"> x </label>
        </div>
        <div class="column-wrap">
          <input id="cy" name="cy" value="40">
          <label for="cy"> y </label>
        </div>
      </div>
    </div>
    <div class="row-wrap">
      <p>Size</p>
      <div class="column-controls row-wrap">
        <div class="column-wrap">
          <input id="rx" name="rx" value="50">
          <label for="rx"> rx </label>
        </div>
        <div class="column-wrap">
          <input id="ry" name="ry" value="50">
          <label for="ry"> ry </label>
        </div>
      </div>
    </div>
    <div class="background">
      <div class="row-wrap">
        <p> Background </p>
        <input id="fill" type="color" name="fill" value="#BDBBB8">
      </div>
    </div>
    <div class="border">
      <p>Border</p>
      <div class="row-wrap">
        <label for="stroke"> Color </label>
        <input id="stroke" type="color" name="stroke" value="#0000ff">
      </div>
      <div class="row-wrap">
        <label for="stroke-width"> Width </label>
        <input id="stroke-width" name="stroke-width" value="2">
      </div>
      <div class="row-wrap">
        <label for="stroke-dasharray"> Style </label>
        <select name="stroke-dasharray">
                    <option value="8, 10" selected="">
                        dashed
                    </option>
                
                    
                    <option value="1, 4">
                        dotted
                    </option>
                
                    
                    <option value="0">
                        solid
                    </option>
                
            </select>
      </div>
    </div>
    <input type="submit" value="save">
  </form>
</div>

＆＃13;

根据你的评论，如果你想填补差距，我会这样做：

＆＃13;

.settings form {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.settings p {
  font-weight: 600;
}

.column-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.column-wrap:nth-child(odd) {
  padding-right: 15px;
}

.column-wrap:nth-child(even) {
  padding-left: 15px;
}

.column-controls {
  width: 60%;
}

.column-controls input {
  width: 100%;
  /* change this so input reaches edge of cell */
  text-align: center;
}

.row-wrap {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}

.heading {
  border-bottom: solid 2px green;
  padding-bottom: 5px;
}

＆＃13;

<div class="settings">
  <form>
    <p class="heading">Properties (ellipse)</p>
    <div class="row-wrap">
      <p>Position</p>
      <div class="column-controls row-wrap">
        <div class="column-wrap">
          <input id="cx" name="cx" value="60">
          <label for="cx"> x </label>
        </div>
        <div class="column-wrap">
          <input id="cy" name="cy" value="40">
          <label for="cy"> y </label>
        </div>
      </div>
    </div>
    <div class="row-wrap">
      <p>Size</p>
      <div class="column-controls row-wrap">
        <div class="column-wrap">
          <input id="rx" name="rx" value="50">
          <label for="rx"> rx </label>
        </div>
        <div class="column-wrap">
          <input id="ry" name="ry" value="50">
          <label for="ry"> ry </label>
        </div>
      </div>
    </div>
    <div class="background">
      <div class="row-wrap">
        <p> Background </p>
        <input id="fill" type="color" name="fill" value="#BDBBB8">
      </div>
    </div>
    <div class="border">
      <p>Border</p>
      <div class="row-wrap">
        <label for="stroke"> Color </label>
        <input id="stroke" type="color" name="stroke" value="#0000ff">
      </div>
      <div class="row-wrap">
        <label for="stroke-width"> Width </label>
        <input id="stroke-width" name="stroke-width" value="2">
      </div>
      <div class="row-wrap">
        <label for="stroke-dasharray"> Style </label>
        <select name="stroke-dasharray">
                    <option value="8, 10" selected="">
                        dashed
                    </option>
                
                    
                    <option value="1, 4">
                        dotted
                    </option>
                
                    
                    <option value="0">
                        solid
                    </option>
                
            </select>
      </div>
    </div>
    <input type="submit" value="save">
  </form>
</div>

＆＃13;

Div与显示器的定位：flex，justify-content：space-between留下不需要的空间

1 个答案: