Question

我有一个<p>标记和一个<a>标记，我希望它可以垂直对齐并且并排放置。为了让您了解我到目前为止所拥有的内容，这是我的代码：

HTML：

<p class="c2a-content">This is just a test. Hopefully it will line up properly!</p>
<a href="#" class="button">My Button</a>

CSS：

.c2a-content{
    float:left;
    text-align:left;
}

.button{
    background:#008ed7;
    color:#fff;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    font-weight:700;
    font-size:16px;
    padding:25px 35px;
    float:left;
}

.button:hover{
    /*background:#007DBD;*/
    background:#0087CC;
    color:#ffffff;
}

现在的方式，段落是我的容器的整个宽度，按钮位于其下方。如何让段落填满容器的2/3并让按钮填满其他1/3？

Answer 1

要点：浮动元素应放在容器中的所有内容之前。

当您首先放置段时，它会占用其父级的所有宽度。浮动元素将在段落之后呈现。

<强> HTML：

<div class="container">
  <a href="#" class="button">My Button</a>
  <p class="c2a-content">This is just a test. Hopefully it will line up properly!</p>
</div>

<强> CSS：

.container {
  overflow: hidden; /* clear fix hack */
}

.c2a-content {
  text-align:left;
  background-color: gold; /* Just for demo */
  margin: 0;              /* Override user agent stylesheet to align vertically */
}

.button {
  /* Other CSS declarations */
  float: right;       /* float the button to the right */
  margin-left: 10px;  /* make a space between button and the paragraph */
}

以下是 JSBin Demo 。

注意：如果您需要从浮动按钮的后面拉出段落，则可以设置overflow-x: hidden; 段落或只是设置margin-left属性。

以下是 JSBin Demo #2 。

如何对齐<p>和<a> tags side-by-side?</a> </p>

1 个答案: