Question

道歉

我正在努力寻找一种解决方案，以将两个按钮放置在与它们左侧的文本框对齐的一列（或两列？）中。我通过在colunm中创建一个rect然后添加浮动到右侧的按钮（对齐）来完成此操作。在桌面屏幕上看起来不错，但是一旦缩小到可以移动的位置，按钮（不在列中）就会散开。我已经附上了该页面的屏幕截图：尝试了一行，但是将按钮放置在该行的现有列（文本框）上。很有可能盯着我，但我看不到！

这是行和列的摘要：

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

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

1 个答案: