一次将两个文本与图像对齐.(一个在左边，另一个在右边)HTML/CSS.

Question

见此图：http://2.bp.blogspot.com/-vJ0gTvs5Vko/UzvHazcJTsI/AAAAAAAAAmU/s8QLk-7iJ2Y/s1600/designername.png

有两个文本。1）由博主标志提供支持2） 由设计师姓名设计

我想把 Powered by 和博主签名放在左边（它在左边）和我想将设计师设计名称放在右侧（它也在左侧）。

我想将这两个放在同一行上，但一个在左边，另一个在右边。

我的代码：

.CSS

 .creditfooter{
background: #333 url(http://nashwp.guuhuu.com/wp-content/themes/nash/assets/img/classy_fabric.png) repeat;
border-top:1px solid #222;
padding:20px;
color:#fff;
text-align:right;  font-family: 'Cabin';
margin-bottom:-5px;
}
.creditfooter a{
text-decoration:none;
color:#ffffff;
font-size:18px;
-webkit-transition: .3s color;
-moz-transition: .3s color;
-o-transition: .3s color;
-ms-transition: .3s color;
transition: .3s color;
}
.creditfooter a:hover{
text-decoration: none;
color:#E47C14;
-webkit-transition: .3s color;
-moz-transition: .3s color;
-o-transition: .3s color;
-ms-transition: .3s color;
transition: .3s color;
}

.poweredbylinks {
text-align: left;
padding:20px;
border-bottom: -5px;
}
.poweredbylinks a{
text-decoration: none;
color:#ffffff;
font-size: 18px;
-webkit-transition: .3s color;
-moz-transition: .3s color;
-o-transition: .3s color;
-ms-transition: .3s color;
transition: .3s color;
}
.poweredbylinks a:hover {
text-decoration: none;
color:#E47C14;
-webkit-transition: .3s color;
-moz-transition: .3s color;
-o-transition: .3s color;
-ms-transition: .3s color;
transition: .3s color;
}

网页代码

<div class='creditfooter'>
<div class='poweredbylinks'>
  Powered By <span class='icon-blogger'></span> &amp; 
 <div class='creditfooterright'> Designed By   <a href='DESIGNER SITE' id='importantlinks'>DESIGNER NAME</a></div>
  </div>
      </div>

Answer 1

添加到你的 CSS

.creditfooterright {
    float: right;
}

http://jsfiddle.net/5X6n9/

Answer 2

只需添加此 css，允许 Design by 始终保持在右侧：

.creditfooterright {
float:right;
}

Answer 3

除非我误解了，否则您不能只在一张图片上使用 float：left，在另一张图片上使用 float：right。您可能需要"清除"父容器。

Answer 4

style="display: inline"

您可以使用此代码更改代码

<div class='creditfooterright' style="display: inline"> Designed By   <a href='DESIGNER SITE' id='importantlinks'>DESIGNER NAME</a></div>