html - 如何水平对齐每个相邻的 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

所以这是学习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帮助为带有 float 子元素的父元素创建高度。