HTMLとCSSを使用して、左、右、中央の3つのボタンを水平に並べる方法を教えてください。

Question

私は、HTML、CSS、Flexbox、またはJSを使用せずに、水平、左、右、中央の3つのボタンを取得しようとしましたが、成功しませんでした。これはどのように達成できますか？これは私が必要なものである：ここでは

は私のコードです：

#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

フレキシボックスには、この種の問題のために理想的です。

変更内容：.button-container {display：flex; justify-content：スペース間。 align-items：center}また、必要がないので浮動小数点数を削除しました。

* {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%; }

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

変更製：.button容器

#row1 {padding: 20px 20px 5px 20px; overflow: hidden} 
 

 
.button-container {display: flex; justify-content: space-between; align-items: center} 
 

 
.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%; }

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

そして、ここでは、フレキシボックスなしに代替の{位置：相対;}また、添加位置適切な左右の特性を持つすべての子供に絶対的な中間の子はcalc（50％ - 17px）の左のプロパティは34pxを2で割って50％から差し引いた幅（パディングとボーダーを含む）に基づいて計算されます。

Answer 2

HTML

<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><!--close button-container"> 
</div><!--close r1--> 

CSS

#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%; } 

Answer 3

あなたはあなたの.button-container財産display:flex;を与えることができ、あなただけのすべてのボタンが隣同士になりたいと仮定すると、Flexboxを使用することができます。

ここにはJSFiddleがあります。あなたがそうあなただけ<br>を追加することですdisplay:block

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

最も簡単な方法を必要としない<div>を使用しているので、

あなたのボタンのコンテナは、すでにブロックレベル要素です各ボタンの後にタグを付けてください。

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