如何对齐< p>和< a>标签并排？ [英] How to align <p> and <a> tags side-by-side?

问题描述

我有一个< p> 标签和一个< a> 标签，有垂直对齐和并排。为了让你知道我到目前为止的内容，这是我的代码：

HTML：

 < p class =c2a-content>这只是一个测试。希望它能正确排列！< / p> 
< a href =＃class =button>我的按钮< / a> 
  

CSS：

  .c2a-content {
 float：left; 
 text-align：left; 
} 
 
 .button {
 background：＃008ed7; 
颜色：#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？ 解决方案

： ： 段落首先占用其父项的所有宽度。并且浮动元素将在段落之后呈现。

HTML：

 < div class =container> 
< a href =＃class =button>我的按钮< / a> 
< p class =c2a-content>这只是一个测试。希望它能正确排列！< / p> 
< / div> 
  

CSS：

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

.c2a-content {
text-align：left;
background-color：gold; / *仅用于演示* /
保证金：0; / *覆盖用户代理样式表以垂直对齐* /
}

.button {
/ *其他CSS声明* /
float：right; / *将按钮向右移动* /
margin-left：10px; / *在按钮和段落之间留出空间* /
}


这里是 JSBin Demo 。

注意：如果您需要从浮动的按钮后面拉出段落，您可以将 overflow-x：hidden; 在段落上，或者简单地设置 margin-left 属性。

以下是 JSBin Demo＃2 。

I have a <p> tag and an <a> tag that I'd like to have vertically aligned and side-by-side. To give you an idea of what I have so far, this is my code:

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

The way things are now, the paragraph is the full width of my container and the button sits below that. How can I get the paragraph to fill up 2/3 of the container and have the button fill up the other 1/3?

解决方案

The point: The floated element should be placed before everything in the container.

When you put the paragraph at first, it takes up all the width of its parent. And the floated element will be rendered after the paragraph.

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 */
}

Here is the JSBin Demo.

Note: If you need to pull out the paragraph from behind of the floated button, you could set overflow-x: hidden; on the paragraph or simply set a margin-left property.

Here is the JSBin Demo #2.

这篇关于如何对齐< p>和< a>标签并排？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！