一次将两个文本与图像对齐。 （左边一个，右边一个）HTML / CSS

Question

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

有两个文字。 1）由博客标志提供支持 2）由设计师名称设计

我想在左边放置Powered by和blogger标志（左边是） 和 我想将Designed by Designer名称放在右边（它也在左边）。

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

我的代码：

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

HTML CODE

<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，允许Designed by始终保持在右侧：

.creditfooterright {
float:right;
}

Answer 3

除非我被误解，否则你不能只使用浮动：左边放在一张图像上并浮动：右边放在另一张图像上。您可能需要＆＃34; clearfix＆＃34;父容器。

Answer 4

style="display: inline"

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

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