Question

我已经工作了一天以上，试图让一些DIV正确显示。现在我已经到了一半，但我仍然有间距问题。我创建了一个fiddle。问题是按钮重叠。

任何人都可以就此提出一些建议。我不知道如何在按钮行之间留出空间。

这是我的代码：

<div class="sbr_bdy">
  <div class="sbr_qu">
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div>
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div>
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div>
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div>
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div>
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div>
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div>
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div>
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div>
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div>
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div>
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div>
    <div><a class="qu" href="1" title="Go to queue 1" >1</a></div>
    <div><a class="qu" href="2" title="Go to queue 2" >2</a></div>
    <div><a class="qu" href="3" title="Go to queue 3" >3</a></div>
  </div>
</div>

.sbr_bdy { padding:0px 15px; xoverflow: hidden;}
.sbr_bdy { background: #666699; }
.sbr_qu   { background: #336699;
    xpadding-bottom:2px; display:inline; float: left; }
.sbr_qu div  {     float: left; padding:5px;
                          -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; }

.sbr_qu a { padding:15px; color:blue;  text-decoration: none;
    border: 2px solid #666;
    background: #ddd;
    xpadding: 2px;
    xmargin: 1px;
    color: #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

Answer 1

由于看起来有很多东西与代码脱离目标，我清理了很多。 [Here is a fiddle]有一个我认为你想要得到的非常清理的版本。或者下面是工作代码。

（或者只是为了好玩，在清理之后，我稍微调整了一下翻转圆边......等等希望你喜欢它;）["Extra" example here]

HTML：

<div class="sbr_qu">
    <a href="1" title="Go to queue 1" >1</a>
    <a href="2" title="Go to queue 2" >2</a>
    <a href="3" title="Go to queue 3" >3</a>
    <a href="1" title="Go to queue 1" >1</a>
    <a href="2" title="Go to queue 2" >2</a>
    <a href="3" title="Go to queue 3" >3</a>
    <a href="1" title="Go to queue 1" >1</a>
    <a href="2" title="Go to queue 2" >2</a>
    <a href="3" title="Go to queue 3" >3</a>
    <a href="1" title="Go to queue 1" >1</a>
    <a href="2" title="Go to queue 2" >2</a>
    <a href="3" title="Go to queue 3" >3</a>
    <a href="1" title="Go to queue 1" >1</a>
    <a href="2" title="Go to queue 2" >2</a>
    <a href="3" title="Go to queue 3" >3</a>
    <div id="anything"></div>
</div>

CSS：

.sbr_qu   {
    background-color: #336699;
    padding: 2px;
    }
.sbr_qu a {
    float: left;
    padding:15px;
    text-decoration: none;
    border: 2px solid #666;
    background-color: #ddd;
    margin: 2px;
    color: #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
#anything { clear: both; }

Answer 2

这只是因为你的A元素比DIV大。您只需要将float：left添加到A元素，这样它们就可以定义DIV的高度。

http://jsfiddle.net/78Uhk/1/

Answer 3

我已经编辑过了。有人可能会说它的原油。但是CLICK HERE

如果你有意输入了这个属性，就没有名为“xoverflow”或“xmargin”或“xpadding”的css属性。

如何隔离我的DIV以阻止重叠？

3 个答案: