css高度和宽度问题

时间:2010-05-24 09:53:35

标签: html css


我有这个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>

问题:

我想让<a>形状像一个正方形,高度= 20px,宽度= 20px。 如果我做float: left,我可以让它有高度和宽度。在那里出现问题,因为我需要<ul>居中,但由于float:left的{​​{1}}而不会。

如何使其与固定高度和锚点宽度居中?

注意:锚点没有固定长度...样本只有5,但它也可以增长到7或9.我还需要链接在视图中内联。

4 个答案:

答案 0 :(得分:3)

a是一个开箱即用的内联元素,通常不能应用宽度和高度。

如果你强行在其样式声明中设置display: block,它的行为就像一个块级元素,你可以设置它的宽度和高度。

答案 1 :(得分:3)

这将使你的李20x20并将它们对齐到中心位置:

<!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>

这是另一种方法 - 它将所有内容设置为20px行高,并且可以包含任意数量的项目:

<!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>

答案 2 :(得分:3)

使用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;
}

答案 3 :(得分:1)

好的,这里完成的是你的回答

这是你的标记

<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>

你的CSS必须是这样的

.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;
}

这个技巧完全灵活,不取决于<UL>的大小