html - 使用显示 : table-cell how can align multiple buttons inside a to the right

Question

我创建了以下 fiddle :http://jsfiddle.net/YN2rz/

这是:

<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将执行此操作(左侧一个按钮，一些文本和右侧三个按钮)

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