высота CSS и ширина проблема

У меня есть этот HTMLвысота CSS и ширина проблема

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

Как я могу сделать его центрированным по высоте и ширине крепления якорей?

примечание: анкеры не имеют фиксированной длины ... образец всего 5, но он также может вырасти до 7 или 9. Мне также нужны ссылки, которые должны быть встроенными.

источник

2010-05-24 Reigel

Ok, сделано вот ваш ответ

это разметка

<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 фигурой, как квадрат, с высотой = 20px и width = 20px.' – ANeves

ok обновлено мой ответ – Starx

+0: Может быть улучшено , но, похоже, работает по назначению - удалено -1. – ANeves

a - это встроенный элемент из коробки, который обычно не может иметь ширину и высоту.

Если вы решительно установили display: block в своем объявлении стиля, он будет вести себя как элемент уровня блока, и вы можете установить его ширину и высоту.

источник

2010-05-24 09:56:09

AHH спасибо за быстрый ответ. Я сделал ваше предложение, но оно должно отображаться inline ... любым другим способом я могу заставить его отображать встроенный? Я действительно застрял ... – Reigel

'display: inline-block;' - но позаботьтесь, он работает в этом случае, потому что он естественным образом встроен, но для элементов, которые являются естественными блочными элементами, встроенный блок не работает для IE7 : http://www.quirksmode.org/css/display.html#t03 – ANeves

Это сделает 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>

Это еще один подход - он устанавливает все линии с высотой 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>

источник

2010-05-24 10:16:58 easwee

+1, похоже, работает должным образом. – ANeves

Использование 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

высота CSS и ширина проблема

ответ

Смежные вопросы