проблема высоты и ширины css - PullRequest
Новая
       4

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

0 голосов
/ 24 мая 2010


У меня есть этот 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> s в форме квадрата с высотой = 20 пикселей и шириной = 20 пикселей. Я могу сделать так, чтобы он имел высоту и ширину, если я сделаю это float: left. Там возникает проблема, потому что мне нужно центрировать <ul>, но это не будет из-за float:left из <a>.

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

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

Ответы [ 4 ]

3 голосов
/ 24 мая 2010

Это сделает ваши li 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>
3 голосов
/ 24 мая 2010

Использование 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 голосов
/ 24 мая 2010

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

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

1 голос
/ 24 мая 2010

Хорошо, вот ваш ответ

это ваша разметка 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...