Question

这是：

<div style="display: table; width: 100%">
  <div style="display: table-row;">
    <div style="display: table-cell;">

    <div style="display: table-row;">
        <div style="display: table-cell;">
            <button>Left 1</button>
        </div>
        <div style="display: table-cell;">
            <button>Left 2</button>
        </div>
        <div style="display: table-cell;">
            <button>Left 3</button>
        </div>
        <div style="display: table-cell;">
            Some text
        </div>
    </div>
    </div>
    <div style="display: table-cell;text-align:right">
        <button>Right 1</button>
    </div>
  </div>
</div>

左侧有三个按钮，右侧有一些文本和一个按钮。

但是我需要一个新的布局，左边有一个按钮，右边有三个按钮，按钮之间有最小的空间。谁能帮忙建议我怎么做？

Answer 1

This会这样做（one button left, some text and three buttons right）

<div style="display: table; width: 100%">
    <div style="display: table-cell;">
        <button>Left 1</button>
    </div>
    <div style="display: table-cell;">Some text</div>
    <div style="display: table-cell;text-align:right">
        <button>Right 1</button>
        <button>Right 2</button>
        <button>Right 3</button>
    </div>
</div>

但是，还有其他方法，不使用内联样式。此外，您可以使用this

<强> HTML：

<div id="wrapper">
    <div id="btn_left">
        <button>Left 1</button>
    </div>
    <div id="text">Some text</div>
    <div id="btn_right">
        <button>Right 1</button>
        <button>Right 2</button>
        <button>Right 3</button>
  </div>
</div>

<强> CSS：

#btn_left, #btn_right, #text{
    display:inline-block;
}
#btn_right{
    float:right;
}

更新：使用表格，您可以尝试this。

使用display：table-cell如何将<div>内的多个按钮对齐到右边</div>

1 个答案: