在我的情况下如何使div显示在一行中

时间:2014-12-02 14:06:13

标签: html css

"空白"和整页一样宽。现在我想在文本"之后添加一个google ads div回到主题"。我已经试过" float:left"。它不能很好地工作。

<div class="blank">
   <p>
     <a href="#"><&nbsp;Back to the topic</a>
   </p>
   this is google ads!
</div>

CSS

.blank p{
  width:980px;
  height:25px;
  margin:80px auto 0px auto;
}
.blank p a{
  color:#007aff;
  font-size:20px;
}

2 个答案:

答案 0 :(得分:2)

将要浮动的元素分开,然后用容器包裹它们。在那之后,清楚。 JSFIDDLE

<div class="container">
    <div class="blank">
         <p><a href="#">&laquo; &nbsp;Back to the topic</a></p>
    </div>
    <div class="advert"><p>this is google ads!</p></div>
    <div class="clear"></div>
</div>

<强> CSS

 div.container {
    width:980px;
    height:25px;
    margin:80px auto 0px auto;}

.blank {
    float: left;
    margin-right: 20px;
}

.blank p a{
    color:#007aff;
    font-size:20px;
}

.advert {float: left;}

.clear {clear: both;}

答案 1 :(得分:0)

您可以使用display: inline-block;

html

<div class="blank">
    <p><a href="#"><&nbsp;Back to the topic</a></p>
    <div class="google-ad">this is google ads!</div>
</div>

<强>的CSS:

.blank p{
  width:980px;
  height:25px;
  margin:80px auto 0px auto;
  display: inline-block;
}
.blank p a{
  color:#007aff;
  font-size:20px;
}
.google-ad{
  display: inline-block;
}