html - 将对齐的按钮放置在文本框旁边的列内

Question

抱歉)

我正在努力寻找将两个按钮放置在一列(或两列？)中并与它们左侧的文本框对齐的解决方案。我通过在列中创建一个矩形然后添加向右浮动的按钮(对齐)来完成此操作。在桌面屏幕上看起来不错，但一旦尺寸缩小到移动按钮(不在列中)就会分崩离析。我附上了页面的屏幕截图:一行有尝试，但按钮放置在行中现有的列(文本框)上。它很可能正盯着我的脸，但我看不到它!

这是行和列的片段:

<div class="row">
                    <div class="col-8 col-md-6 white-rect mr-4  ">
                        <ul>
                            <li>
                                Book flights.
                            </li>
                        </ul>
                            <button type="button" class="btn my-primary btn-sm my-small-btn">COMPLETE</button>
                    
                            <button type="button" class="btn my-primary2 btn-sm my-small-btn"> DELETE </button>
                    </div>
                </div>```

And here's the code for the the row with the buttons that are aligned in desktop but are effectively floating outside a column:

```<div class="row">
                    <div class="col-8 col-md-6 white-rect mr-4">
                        <ul>
                            <li>
                                Reschdule Twitter Meeting.
                            </li>
                        </ul>
                    </div>
                    <button type=".button" class="btn my-primary btn-sm my-small-btn">COMPLETE</button>
                    <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div>
                    <button type=".button" class="btn my-primary2 btn-sm my-small-btn"> DELETE </button>
                </div>

非常感谢。

Answer 1

您可能需要调整数字，但我会这样做:

.grid {
  display: grid;
  grid-gap: 12px;
  grid-template-columns: 1fr max-content;
}

@media screen and (min-width: 768px) {
  .grid {
    grid-gap: 24px;
    grid-template-columns: minmax(200px, 1fr) minmax(max-content, 1fr);
  }
}

.input {
  width: 100%;
}

<section class="grid">
  <div class="input-container">
    <input type="text" class="input">
  </div>

  <div class="buttons-container">
    <button class="button">complete</button>
    <button class="button">delete</button>
  </div>
  

  <div class="input-container">
    <input type="text" class="input">
  </div>

  <div class="buttons-container">
    <button class="button">complete</button>
    <button class="button">delete</button>
  </div>
  
  <div class="input-container">
    <input type="text" class="input">
  </div>

  <div class="buttons-container">
    <button class="button">complete</button>
    <button class="button">delete</button>
  </div>
  
  <div class="input-container">
    <input type="text" class="input">
  </div>

  <div class="buttons-container">
    <button class="button">complete</button>
    <button class="button">delete</button>
  </div>
</section>