Question

所以我无法在页面上对齐3个圆圈。

这是HTML

<div class="row">
<div class="large-9 push-2 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>



<div class="row">
<div class="large-9 push-4 columns">

<div class="cyan"></div>
<a href="#">Recevez</a>


</div>
</div>

<div class="row">
<div class="large-9 push-6 columns">

<div class="orange"></div>
<a href="#">Statistique</a>
</div>
</div>
</div>

这是CSS：

.green, .cyan, .orange  {
    border-radius: 50%;
    width: 15px;
    height: 15px; 
    position: relative;
    float: left;

}
.green  {
background: #40b564;


}
.cyan   {
background: #61cfcc;

}

.orange {
background: #f8765c;

}

这是它的样子：

http://4.ii.gl/V0DOyL.png

我基本上希望3个圆圈（3个div）水平对齐。现在我尝试了display：inline-block;和其他东西似乎没有任何作用。我不知道这与基金会框架有什么关系？我一直试图想出这几个小时，任何帮助将不胜感激！

Answer 1

你将它们分开class="rows"，这就是它们分开的原因。你必须将它们放在一行。

<div class="row">
<div class="large-4 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>

<div class="large-4 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>

<div class="large-4 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>

</div>

在你的代码中尝试这个，上传一个新的快照，我会看看我是否可以提供帮助。

我注意到的另一个错误是（与您当前的布局无关）：

<div class="large-9 push-6 columns">

<div class="orange"></div>
<a href="#">Statistique</a>
</div>

你正在做large-9 push-6，总数不应超过12.在你的情况下它是9 + 6 = 15，它应该像large-9 push-3, large-8 push-4 or large-6 push-6所以总数总是12

div不会在CSS中水平对齐

1 个答案: