Question

以下是表格输入表单的一些简化代码：

<html>
<body>
    <div class='container' style='width: 950px; margin-left: auto; margin-right: auto'>
        <form>
            <table>
               <colgroup>
                  <col width='175' />
                  <col width='200' />
                  <col width='200' />
               </colgroup>
               <tr>
                  <td>Input Field 1</td>
                  <td>Input Field 2</td>
                  <td>Input Field 3</td>
               </tr>
            </table>           
             <div class='buttons-small' style='float: right';>
                <button class='submit'>Update</button>
                <button class='cancel'>Cancel</button>
             </div>
             <div style='clear: both'></div>
         </form>
     </div>
</body>
</html>

我想要的是按钮 - 小div与其上方桌子的右边缘对齐。我可以为表单设置一个width属性（在这种情况下它将是575px），但是表的宽度会有所不同，具体取决于生成代码的php选择的列。因此，表单的宽度需要是动态的。现在它总是继承其容器的宽度，大概是因为右浮动按钮强制它。

如何使用CSS确保表单始终是表格内部的宽度？到目前为止，我发现的唯一方法是将其向左浮动，但这似乎是不必要的，因为它的右侧不需要任何元素。

谢谢！

Answer 1

添加display：inline-block;在你的表格中，它会将容器收缩包裹在桌子周围。

如何使用CSS将容器元素强制为其最宽子元素的宽度？

1 个答案: