如何對齊每個水平旁邊的2個按鈕？

Question

林希望它看起來像：

 [BUTTON] 
     or 
[Button 1] [Button2] 

但是我不知道如何做到這一點。

我的代碼：

HTML：

<p> <a href="#" class="back">&#8592; Get Started</a></p> 
<h3>or</h3> 

<p> <a href="#" class="back" id="bottom-btn1"><i class="fa fa-code-fork"></i> Log In/Sign Up</a></p> 
<p> <a href="#" class="back" id="bottom-btn2"><i class="fa fa-user-plus" ></i> Sign Up</a></p> 

CSS：

#bottom-btn1{ 
    margin-top: 10px; 
    margin: 20px; 
    margin-left: 340px; 
    display: inline-block; 
    float: left; 
} 
#bottom-btn2{ 
    margin-top: 10px; 
    margin: 20px; 
    margin-right: 40px; 
    display: inline-block; 
    float: right; 
} 

的jsfiddle鏈接：https://jsfiddle.net/d2L7ynu3/ 謝謝，幫助我的人。它意味着很多：D

Answer 1

p元素使按鈕被繪製在不同的行中。您可以嘗試

p { 
    display: inline-block; 
} 

我建議放置一個選擇器類中那些p之間，這樣你就不需要覆蓋所有的CSS個p元素

Answer 2

不要忘記text-align : center;這樣可以節省大部分的時間。

我剛剛完成了你的代碼..這可能會幫助你改進你的代碼..只要改變.wrap大小，如果你對按鈕做任何改變。希望它可以幫助

p, .back, h3 { 
 
    text-align: center; 
 
} 
 
.wrap { 
 
    margin: 0 auto; 
 
    width: 172px; 
 
} 
 
.btn { 
 
    float: left; 
 
    margin-left: 5px; 
 
}

<p> <a href="#" class="back">&#8592; Get Started</a> 
 
</p> 
 
<h3>or</h3> 
 

 
<p class="wrap"> 
 
    <a href="#" class="btn" id="bottom-btn1"><i class="fa fa-code-fork"></i> Log In/Sign Up</a> 
 
    <a href="#" class="btn" id="bottom-btn2"><i class="fa fa-user-plus" ></i> Sign Up</a> 
 
</p>

Answer 3

試試這個

<div class="buttonbox"> 
    <p> <a href="#" class="back">&#8592; Get Started</a></p> 
    <h3>or</h3> 
    <p> <a href="#" class="back" id="bottom-btn1"><i class="fa fa-code-fork"></i> Log In/Sign Up</a></p> 
    <p> <a href="#" class="back" id="bottom-btn2"><i class="fa fa-user-plus" ></i> Sign Up</a></p> 
</div> 

CSS

.buttonbox { 
    text-align: center; 
} 
.buttonbox > p { 
    display: inline-block; 
    float: none!important; 
} 

不叫浮動：左;爲那些按鈕。

Answer 4

HTML：

 <div class="wrap"> 
     <a href="#" class="back">&#8592; Get Started</a> 

     <h3>or</h3> 

     <div> 
      <a href="#" class="back" id="bottom-btn1"><i class="fa fa-code-fork"></i> Log In/Sign Up</a> 
      <a href="#" class="back" id="bottom-btn2"><i class="fa fa-user-plus" ></i> Sign Up</a> 
     </div> 
     </div> 

CSS：

.wrap { 
    max-width: 1000px; /* any size you want */ 
    width: 96%; /* 960px */ 
    margin: 0 auto; 
    text-align: center; 
    overflow: hidden; 
    padding: 1%; 
} 

.wrap h3 { 
    margin: 10px 0; 
} 

.wrap a { 
    padding: 20px 0; 
} 

.wrap > a { 
    border: 1px solid #ddd; 
    display: block; 
    width: 60%; 
    margin: 0 auto; 
} 

.wrap div a { 
    width: 48%; 
    float: left; 
    outline: 1px solid #ddd; 
    margin: 0 1%; 
} 

結果是這樣的：

 [BUTTON] 
      or 
[Button 1] [Button2] 

Answer 5

所以這是在CSS定位學習的好機會;我爲了學習而奮鬥了多年。有兩種實現這種效果的主要方法，但他們有一些陷阱。使用下面的HTML（我已經拿出了p標籤）。

<a href="#" id="get_started">Get Started</a> 
<span>or</span> 
<a href="#" id="log_in">Log In</a> 
<a href="#" id="sign_up">Sign Up</a> 

的inline-block方法將在這裏工作，但我們需要做一個小的變化，以獲得鏈接，彼此相鄰排隊。 inline-block保留了空白區域，所以你會看到元素之間的差距。在元素之間添加HTML註釋將刪除空白區域（或者爲了便於閱讀，您可以將元素並排放置而不用換行符）。

<a href="#" id="get_started">Get Started</a> 
<span>or</span> 
<a href="#" id="log_in">Log In</a><!-- 
--><a href="#" id="sign_up">Sign Up</a> 

現在我們可以添加CSS。

a{ 
    display:inline-block; 
} 

#get_started{ 
    width:100%; 
} 

#log_in, #sign_up{ 
    width:50%; 
} 

如果你沒有把在HTML註釋，你會發現因爲隱白空間log_in下sign_up鏈接下降。

如果你使用float方法，那麼你需要一些額外的標記。

<a href="#" id="get_started">Get Started</a> 
<span>or</span> 
<p class="cf"> 
    <a href="#" id="log_in">Log In</a> 
    <a href="#" id="sign_up">Sign Up</a> 
</p> 

.cf:before, .cf:after{ 
    content:""; 
    display:table; 
} 

.cf:after{ 
    clear:both; 
} 

a{ 
    display:block; 
} 

#get_started{ 
    width:100%; 
} 

#log_in, #sign_up{ 
    float:left; 
    width:50%; 
} 

的cf類代表clearfix，這是a hack developed幫助與浮動兒童的父元素創造的高度。