如何将按钮彼此相邻放置[重复]

Question

我刚刚开始关注网页设计，我正在尝试实现一些简单的东西，但我不确定实现这一目标的最佳方法是什么。

我只是想做的是将按钮放置在彼此旁边，而不管它前面的文本的长度如何。 IE 如下面的屏幕截图所示，我有 4 列带有段落和按钮。

Answer 1

使用flexbox。

div {
    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-align-items: center;
}
ul {
    display: -webkit-flex;
}

li {
    -webkit-flex: 1;
}

http://jsfiddle.net/pTsW4/85/

browser support

Answer 2

不确定 flexbox 支持的范围有多大。我会选择单独的 div 或 jQuery 在所有（相对）列上应用 equal height 的解决方案，然后将按钮放在底部（绝对）。

Answer 3

在父容器上使用display: flex; 以确保所有块具有相同的高度。然后从bottom 和left 中定位<button> 绝对值。通过向左平移按钮宽度的 -50% 来居中。

http://codepen.io/anon/pen/jPyLGK

ul {
  font-family: verdana, sans-serif;
  display: flex;
  list-style: none;
  justify-content: space-between;
  width: 600px;
}

li{
  background-color: #eeeef0;
  border-radius: 10px;
  box-shadow: 0 0 5px #666;
  flex-grow: 3;
  flex-shrink: 1;
  margin: 10px;
  padding: 0 10px 50px;
  position: relative;
  text-align: center;
}

li p {
  text-align: left;
}

li button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

<ul>
  <li>
    <h2>Test 1</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <img src="http://lorempixel.com/120/150" />
    <button>Go now!</button>
  </li>
  <li>
    <h2>Test 2</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <img src="http://lorempixel.com/90/160" />
    <button>Go now!</button>
  </li>
  <li>
    <h2>Test 3</h2>
    <p>Lorem ipsum dolor sit amet.<br /> Lorem ipsum dolor sit amet.</p>
    <img src="http://lorempixel.com/100/260" />
    <button>Go now!</button>
  </li>
  <li>
    <h2>Test 4</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <button>Go now!</button>
  </li>
</ul>

Answer 4

http://jsfiddle.net/pTsW4/87/

* { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    box-sizing: border-box;  
 }


ul {
    margin: 0;
    display:table;
}

li {
    display:table-cell;
    width:30%;
    padding: 20px 20px 40px 20px;
    position: relative;
    border: 1px solid #000;
}

button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

将显示表添加到“ul”，将表格单元格添加到子“li”是为了确保高度相等。添加了 40px 的填充底部以为按钮留出空间，然后按钮绝对定位到 'li' 的底部。

Answer 5

尝试在单独的 div 中添加按钮：

<div><p>Text 1</p></div>
<div><p>Text 2</p></div>
<div><p>Text 3</p></div>
<div><p>Text 4</p></div>
<div>...buttons...</div>

然后用css定位div。

Answer 6

JSFiddle demo

    <tr>
        <td> Funny Hello Images</td>
        <td> Funny Hello Images</td>
        <td> Funny Hello Images</td>
        <td> Funny Hello Images</td>
    </tr>
    <tr>
        <td>Find the best Hello images, greetings and pictures here. Browse our great collection of hello pictures and choose your favourite to send to a friend.</td>
        <td> Share an image on Facebook by clicking the button below the graphic, or copying and pasting the link.</td>
        <td>Share an image on Facebook by clicking the button below the graphic, or copying and pasting the link.</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td> <button>button1</button></td>
        <td> <button>button2</button></td>
        <td> <button>button3</button></td>
        <td> <button>button4</button></td>
    </tr>
</table>

CSS：

table td { 
    table-layout:fixed;
  width:20%;
  overflow:hidden;
    word-wrap:break-word;
}

更新了链接