Question

我试图在同一行设置一些按钮作为表单内的输入。我认为按钮必须是块元素，因为我需要设置它们的宽度和高度以使它们保持圆形。输入需要具有响应宽度，优选地约为容器的80％，以便可以在输入的任一侧设置按钮。我遇到的问题是我不能将它们放在同一行而不显示按钮和输入作为内联或内联块，但是当我这样做时，输入的宽度不会设置100％。那么，如何在不影响按钮大小和保持输入宽度响应的情况下将这些东西放在同一条线上呢？

我也愿意使用flexbox，如果这样会更容易，但知道如何在HTML中以语义正确的方式进行操作会非常有用。这可能是之前被问过的问题，但我一直在寻找一段时间，并且无法真正理解如何解决我的具体问题。

CSS：

#searchone {
width: 100%;
}

/* ticket number selection */

.ti{
  font-weight: 900;
  margin-top: 10px;
}

.tickets {
 display: block;
 width: 100%;
 background-color: red;
}

.tickets label {
display: block;
}

.tickets input {
display: inline-block;
}

/* buttons for tickets */

#more,
#less {
  display:inline-block;
  background-color: #004EA6;
  border-radius:50%;
  width: 20px;
  height: 20px;
  text-align:center;
  vertical-align: center;
}

HTML：

<li class="ti">
        <label for="tickets">Tickets</label>
      </li>
      <li>
        <ul class="tickets">
          <li>
            <label for="adult">Adults</label>
            <input type="text" name="tickets" id="adult" pattern="[0-9]*" inputmode="numeric" value="1" />
          </li>
          <li>
            <label for="senior">Seniors</label>
            <input type="text" name="tickets" id="senior" pattern="[0-9]*" inputmode="numeric" value="0" />
          </li>
          <li>
            <label for="children">Children</label>
            <input type="text" name="tickets" id="children" pattern="[0-9]*" inputmode="numeric" value="0" />
          </li>
          <li>
            <label for="infant">Infants</label>
            <input type="text" name="tickets" id="infant" pattern="[0-9]*" inputmode="numeric" value="0" />
          </li>
        </ul>
      </li>

按钮是通过JS插入的，但我认为你不需要全部，所以我只给你一行我如何插入。该行与id #less和减号而不是加号重复。

JS：

  $('#adult').after('<a class="ad" id="more" href="#null">+</a>');

如果你能帮助甚至指导我到另一个有答案的地方，谢谢!!

Answer 1

您可以将具有固定尺寸的按钮放在具有inline属性的元素中。

如何设置内联元素的响应宽度？

1 个答案: