Question

我一直试图让三个按钮 - 左，右和中心 - 使用HTML和CSS水平排列，没有Flexbox或JS，但没有成功。怎么能实现这一目标？这就是我需要的：

这是我的代码：

#row1 {padding: 20px 20px 5px 20px;
           overflow: hidden; }

.button-container {display: block; text-align: center;}

.button-left {
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    float: left;
    font-size: 75%; }

.button-right {
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    float: right;
    font-size: 75%; }

.button-centre {
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    font-size: 75%; }

<div id="row1">
<div class="button-container">
<span class="button-left"><a href="#1">previous</a></span>
<span class="button-centre"><a href="#2">issue</a></span>
<span class="button-right"><a href="#3">next</a></span>
</div><!--close button-container">
</div><!--close r1-->

Answer 1

Flexbox 非常适合此类问题：

＆＃13;

#row1 {
  padding: 20px 20px 5px 20px;
  overflow: hidden;
}

.button-container {
  display: flex; /* displays flex-items (children) inline */
  justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
  align-items: center; /* centers them vertically */
}

.button-left {
  padding: 0 5px;
  text-align: center;
  border: 1px solid;
  font-size: 75%;
}

.button-right {
  padding: 0 5px;
  text-align: center;
  border: 1px solid;
  font-size: 75%;
}

.button-centre {
  padding: 0 5px;
  text-align: center;
  border: 1px solid;
  font-size: 75%;
}

＆＃13;

<div id="row1">
  <div class="button-container">
    <span class="button-left"><a href="#1">previous</a></span>
    <span class="button-centre"><a href="#2">index</a></span>
    <span class="button-right"><a href="#3">next</a></span>
  </div>
</div>

＆＃13;

没有 Flexbox 的替代方案：

＆＃13;

* {margin: 0; padding: 0; box-sizing: border-box}

#row1 {padding: 20px 20px 5px 20px}

.button-container {position: relative}

.button-left {
    position: absolute;
    left: 0;
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    font-size: 75%; }

.button-right {
    position: absolute;
    right: 0;
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    font-size: 75%; }

.button-centre {
    position: absolute;
    left: calc(50% - 17px);
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    font-size: 75%; }

＆＃13;

<div id="row1">
  <div class="button-container">
    <span class="button-left"><a href="#1">previous</a></span>
    <span class="button-centre"><a href="#2">issue</a></span>
    <span class="button-right"><a href="#3">next</a></span>
  </div>
</div>

＆＃13;

所做的更改：.button-container {position: relative}，还为所有孩子添加了position: absolute，并left和{{{em>值 1}} 属性，对于中间孩子 right 属性的值 {{1 }}是根据它的宽度（包括left和calc(50% - 17px)）计算的，padding除以2并从{{1}中扣除}。

Answer 2

HTML

error.php

CSS

default

Answer 3

您可以使用Flexbox，假设您只是希望所有按钮彼此相邻，则可以将<div id="row1"> <div class="button-container"> <span class="button"><a href="#1">previous</a></span> <span class="button"><a href="#2">index</a></span> <span class="button"><a href="#3">next</a></span> </div>属性#row1 { padding: 20px 20px 5px 20px; overflow: hidden; } .button-container {display: block; text-align: center;} .button { padding: 0 5px; text-align: center; border: 1px solid; font-size: 75%; }。

这里是JSFiddle。

您的按钮容器已经是块级元素，因为您使用的是compile 'com.alexvasilkov:gesture-views:2.3.2'，因此您不需要.button-container

Answer 4

.btns {
  position: relative;
  display: inline-block;
  font-size: 0;
}
.btns a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  background-color: #F4F4F4;
  color: #000;
  font-size: 14px;
  padding: 5px 15px;
  transition: all .3s ease-in-out;
}
.btns a:hover {
  background-color: #777;
  color: #FFF;
}
.btns a:first-child {
  border-radius: 10px 0 0 10px;
  border-right: 1px solid #CCC;
}
.btns a:last-child {
  border-radius: 0 10px 10px 0;
  border-left: 1px solid #CCC;
}

<div class="btns">
  <a href="#">Previous</a>
  <a href="#">Index</a>
  <a href="#">Next</a>
</div>

Answer 5

最简单的方法是在每个按钮后添加<br>标记，将其排成一行：

    <div id="row1">
    <div class="button-container">
    <span class="btns button-left"><a href="#1">previous</a></span>
    <br>
    <span class="btns button-centre"><a href="#2">index</a></span>
    <br>
    <span class="btns button-right"><a href="#3">next</a></span>
    <br>
    </div><!--close button-container">
    </div><!--close r1-->

如何使用HTML和CSS水平排列三个按钮（左，右和中心）？

5 个答案: