Question

我有这个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.我还需要链接在视图中内联。

Answer 1

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

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

Answer 2

这将使你的李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>

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

Answer 4

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

这是你的标记

<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>的大小

css高度和宽度问题

4 个答案: