Question

你好我想知道我怎么能将div放在一起水平，到目前为止我已经使用了margin：0 auto;把它们放在中间，但是div正好在彼此之下，而不是彼此相邻。关于如何解决这个问题的任何想法？

这是一个codepen：http://codepen.io/anon/pen/KdMmPo

HTML：

    def index = Action.async {
      val users = Users.all
      val json = Json.toJson(users)
        json.map{ actualJson =>
        //do something fancy
        println(actualJson)
        Ok(views.html.index("Your new application is ready."))
      }
    }

CSS：

<section id="rating-box">
   <div class="rating"></div>
   <div class="rating"></div>
   <div class="rating"></div>
   <div class="rating"></div>
   <div class="rating"></div>
   <div class="rating"></div>
</section>

如你所见，他们彼此重叠，我想知道如何让他们站在一起。

Answer 1

您可以将display: inline-block用于子元素，将text-align: center用于父级：

#rating-box {
  width: 100%;
  margin: 20px 0 20px 0;
  text-align: center;
}
#rating-box .rating {
  width: 35px;
  height: 35px;
  background-color: #7a7a7a;
  display: inline-block;
}

<section id="rating-box">
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
</section>

Answer 2

你可以漂浮它们。

#rating-box .rating {
    float: left;
}

Answer 3

#rating-box .rating {
    width: 35px;
    height: 35px;
    background-color: #7a7a7a;
    margin: 0 auto;
    display: inline-block;
}

将几个div放在一起水平放置

3 个答案: