Question

目前，我正在IntelliJ从头开始创建网上商店。现在，我很难在与数量相同的行上显示用于增加/减少数量的按钮。

我已经尝试过从该网站上获得一些建议的解决方案，这些解决方案与CSS和类有关，但无济于事。我也尝试过使用id和class的混合体。

下面是HTML：

<td><div id="outer">
    <div class="inner"><button type="button" name="button"><img src="minus.jpg" alt="minus" height="10px" width="10px"/></button></div>
    <div class="inner"><input type="text" name="name" value="1"></div>
    <div class="inner"><button type="button" name="button"><img src="plus.jpg" alt="plus" height="20px" width="20px"/></button></div>
    </div>
</td>

下面是我尝试过的CSS的相应部分：

#outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
}

当前，每个组件仍显示在彼此的顶部，而不是彼此相邻。

Answer 1

<style>
#outer {
    display: flex;
    width: 250px;
}
</style>

您可以在父容器上使用FlexBox，它将沿flex方向移动所有子项（默认设置）：所以本质上是第一元素，第二元素，第三元素。

此外，我将宽度设置为250px，以保持容器尽可能小。您可以使用border: 1px solid red查看容器的大小。如果您希望容器使用全长，请使用justify-content: center并摆脱宽度选择器。

显示：flex也不是一项新技术，因此没有理由不学习和使用它。最新最好的定位元素是CSS网格。

Answer 2

尝试一下。

<table id="outer">
    <tr class="inner">
        <td>
            <button type="button" name="button"><img src="minus.jpg" alt="minus" height="10px" width="10px"/></button>
        </td>
        <td>
            <input type="text" name="name" value="1">
        </td>
        <td>
            <button type="button" name="button"><img src="plus.jpg" alt="plus" height="20px" width="20px"/></button>
        </td>
    </tr>
</table>

如何在一个表的同一行上获取多个按钮？

2 个答案: