May 24, 2010
css height and width problem
Question by Reigel
I have this HTML
<div class="someClass">
<ul>
<li><a href="index.html">1</a></li>
<li><a href="index.html">2</a></li>
<li><a href="index.html">3</a></li>
<li><a href="index.html">4</a></li>
<li><a href="index.html">5</a></li>
</ul>
</div>
Problem:
I want to make the <a>s to shape like a square, with height = 20px and width = 20px.
I can make it have the height and width if I make it float: left. In there the problem occur cause I need the <ul> to be centered but it won’t because of the float:left of the <a>.
how can I make it centered with fix height and width of the anchors?
note: anchors don’t have fixed length… the sample is just 5, but it can also grow to 7, or 9. I also need the links to be inline in view.
Answer by Starx
Ok, done here is your answer
this is your markup
<div class="someClass">
<ul>
<li><a href="index.html">1</a></li>
<li><a href="index.html">2</a></li>
<li><a href="index.html">3</a></li>
<li><a href="index.html">4</a></li>
<li><a href="index.html">5</a></li>
</ul>
</div>
Your CSS must be something like this
.someclass {
width:100%;
overflow:hidden;
}
.someclass ul {
position:relative;
float:left;
left:50%;
list-style:none;
}
.someclass ul li {
position:relative;
float:left;
right:50%;
}
.someclass ul li a {
display:block;
height:100px;
width:100px;
border: 1px #f00 solid;
}
This trick is completely flexible does not depend on how big your <UL> is
