css height and width problem

Question

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.

David Hedlund · Accepted Answer · 2010-05-24 09:56:09Z

3

a is an inline element out of the box, which typically cannot have width and height applied to it.

If you forcibly set display: block in its style declaration, it'll behave like a block level element, and you can set its width and height.

answered May 24, 2010 at 9:56

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reigel Gallarde Over a year ago

ahh thanks for the quick reply. I have done your suggestion but it has to be displayed inline... any other way I can make it display inline? I'm really stuck...

ANeves Over a year ago

display: inline-block; - but take care, it works in this case because a is naturally inline, but for elements that are naturally block elements inline-block doesn't work for IE7: quirksmode.org/css/display.html#t03

easwee · Accepted Answer · 2010-05-24 10:16:58Z

This will make your li's 20x20 and align them to center:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .someClass ul {line-height:20px;text-align:center;width:105px;margin:0 auto;overflow:hidden;}
    .someClass ul li {display:block;width:20px;height:20px;float:left;background:blue;margin-right:1px;}
    .someClass ul li a {color:#fff;}
    </style>
</head>
<body>
    <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>
</body>
</html>

This is another approach - it sets everything inline with a 20px line height and can have any number of items:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .someClass ul {line-height:20px;text-align:center;}
    .someClass ul li {display:inline;}
    .someClass ul li a {display:inline}
    </style>
</head>
<body>
    <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>
</body>
</html>

Tatjana N. · Accepted Answer · 2010-05-24 10:19:34Z

3

Use display:inline-block :

.someClass ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

.someClass ul li { display: inline; }

.someClass ul li a
{
  display: inline-block;
  text-decoration: none;
  width: 20px;
  height: 20px;
}

answered May 24, 2010 at 10:19

Tatjana N.

6,23534 silver badges29 bronze badges

1 Comment

ANeves Over a year ago

+1: perfect! But, repeating the comment on that other answer: pay attention that inline-block doesn't work on IE7 for elements that are naturally block elements: quirksmode.org/css/display.html#t03

Starx · Accepted Answer · 2010-05-24 11:55:21Z

1

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

edited May 24, 2010 at 11:55

answered May 24, 2010 at 10:33

Starx

79.3k50 gold badges187 silver badges266 bronze badges

2 Comments

ANeves Over a year ago

-1, this doesn't even answer the first line of the question: I want to make the <a>s to shape like a square, with height = 20px and width = 20px.

ANeves Over a year ago

+0: Could be improved, but seems to work as intended - removed -1.

Collectives™ on Stack Overflow

css height and width problem

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related