How can I space out my DIVs to stop overlap?
I have been working for over a day trying to get some DIVs to display correctly. Now I'm half way there but I still have a spacing problem. I created a fiddle . The problem is that the buttons overlap.
开发者_运维百科Can anyone provide some advice on this. I don't know how I can space between the rows of buttons.
Here is the code I have:
<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;
}
Since it appears there are a decent number of things going off-target with the code, I cleaned it up a lot. [Here is a fiddle] with a very cleaned up version of what I think you're trying to get. Or below is the working code.
(OR just for fun, after cleaning it up, I tweaked it a bit w/ rollovers rounded edges...etc Hope you like it ;) ["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; }
That's just because your A elements are bigger than DIV's. All you need is to add float:left to A elements so they will define DIV's height.
http://jsfiddle.net/78Uhk/1/
I have edited it. One might say its crude. But CLICK HERE
And there are no css attributes called "xoverflow" or "xmargin" or "xpadding" in case you have intentionally typed that.
精彩评论