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

Answer 2

不要忘记text-align : center;它可以节省大部分时间。

我只是整理了你的代码..这可能会帮助你改进你的编码..如果你对按钮做任何更改，只需更改.wrap大小。希望它有所帮助

＆＃13;

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

＆＃13;

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

＆＃13;

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评论，那么由于隐藏的空白区域，您会注意到sign_up链接下方的log_in链接。

如果你改用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帮助为浮动子元素的父元素创建高度。

Answer 6

#bottom-btn1, #bottom-btn2{
    padding: 10px;
    border: solid black 3px;
    background-color: #83D8B7;
    color: #134A1E;
}

a{
    text-decoration: none
}

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

如何将两个按钮水平对齐？

6 个答案: