CSS的高度和寬度的問題

我有這樣的HTMLCSS的高度和寬度的問題

<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> s至形狀像一個正方形，高度= 20像素和寬度= 20像素。我可以讓它具有高度和寬度，如果我使它float: left。在那裏出現問題，因爲我需要<ul>居中，但它不會因爲<a>的float:left。

我怎樣才能使它與錨的固定高度和寬度居中？

說明：錨點沒有固定的長度......樣本只有5個，但它也可以增長到7個，或9個。我還需要鏈接在內聯視圖。

來源

2010-05-24 Reigel

好吧，這裏做的是你的答案

這是您的標記

<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>有多大感謝

來源

2010-05-24 10:33:38 Starx

-1這甚至不回答這個問題的第一行：'我想要讓 s到外形似一個正方形，高度= 20像素和寬度= 20px.' – ANeves 2010-05-24 11:10:18

確定更新我的回答 – Starx 2010-05-24 11:52:20

+ 0：可以改善，但似乎按預期工作 - 刪除-1。 – ANeves 2010-05-24 12:58:29

a是開箱，其通常的寬度和高度適用於它不能有一個內嵌元素。

如果強行在其樣式聲明設置display: block，它會像一個塊級元素，你可以設置它的寬度和高度。

來源

2010-05-24 09:56:09

啊了快速回復。我已經完成了你的建議，但它必須以內聯方式顯示...任何其他方式，我可以使其顯示內聯？我真的被卡住了...... – Reigel 2010-05-24 10:00:41

'display：inline-block;' - 但要小心，它在這種情況下起作用，因爲a是自然內聯的，但對於自然是塊元素的元素，inline-block不適用於IE7 ：http://www.quirksmode.org/css/display.html#t03 – ANeves 2010-05-24 11:15:48

這會讓你的麗的20×20，並將它們對齊中心：

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

這是另一種方法 - 它內嵌所有設置了20像素的行高，可以有任意數量的項目：

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

來源

2010-05-24 10:16:58 easwee

+1，似乎按預期工作。 – ANeves 2010-05-24 11:13:12

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

來源

2010-05-24 10:19:34 Voyta

+1：完美！但是，請重複對其他答案的評論：請注意，對於自然爲塊元素的元素，內聯塊在IE7上不起作用：http://www.quirksmode.org/css/display.html#t03 – ANeves 2010-05-24 11:18:01

CSS的高度和寬度的問題

回答

相關問題