Question

我有5个按钮，我需要它们按照一定的顺序：
按钮1
按钮2按钮3
按钮4按钮5

宽度方面我希望按钮1为宽度的90％和中间（5％空白，90％按钮，5％空白）剩下的按钮为40％，10％在2＆amp; 3和4＆amp; 5之间（中间也是％5，两边都是空白）

高度方面我希望按钮1占25％（高于它我想要25％的净空间）其余按钮各占15％每行之间5％（最后一行和屏幕结束之间的10％）它就像：（25％空，25％按钮1,5％空，15％按钮2＆amp; 3,5％空，15％按钮4＆amp; 5，10％空）

我在路上迷路了任何帮助都会很有帮助！

这就是我到目前为止所得到的：here
这是我想要实现的一个例子http://s2.postimg.org/p57abzzq1/btns.jpg
谢谢！

Answer 1

我对您的所有特定尺寸要求感到有点困惑，但只要按照您需要的顺序获取按钮，这可能会有所帮助：

Demo Fiddle

我修改了你的html，因为你错过了关闭</button>标签，并且有错误的</a>标签。我还添加了一个包裹元素，并将其变为蓝色，以便您可以看到正在发生的事情。

编辑 - 这是更新的代码，可以将内容设计得更接近您所寻找的内容。现在按钮设置为％，无论您将button-wrapper设置为什么尺寸，它们都应该保留该布局。

HTML：

<div class="button-wrapper">
    <button class="btn1">button 1</button>
    <button class="btn23">button 2</button>
    <button class="btn23">button 3</button>
    <button class="btn45">button 4</button>
    <button class="btn45">button 5</button>
</div>

CSS：

.button-wrapper {
    width: 300px;
    background: lightblue;
}
.button-wrapper button:first-child {
    width: 100%;
    height: 300px;
    margin: 0px;
}
button {
    width: 49%;
    height: 50px;
    margin: 5px 0px;
}

对齐按钮问题

1 个答案: