Как мне соответствовать ширине li в ul? - PullRequest
Новая
       2

Как мне соответствовать ширине li в ul?

0 голосов
/ 27 июля 2011

У меня ширина 600px, и у меня есть 4 li, которые не занимают все 600px.Как я автоматически подгоняю li, чтобы они занимали все 600px?Я не хочу жестко кодировать ширину li, так как я использую классы в разных местах. Ниже приведен скриншот, я пытаюсь установить меню «Новейшие, горячие голоса активны», чтобы они соответствовали всей ул.Sample screenshot

    #content-tabs {
  background-color: #78ae09;
  float: left; /* LTR */
  margin: 20px 0;
  padding: 0;
-moz-box-shadow: 0px 2px 3px #c4c4c4;-webkit-box-shadow: 0px 2px 3px #c4c4c4;box-shadow: 0px 2px 3px #c4c4c4;

}

#content-tabs ul.primary,
#content-tabs ul.secondary {
/*  border-bottom: 1px solid #000;*/
  clear: both;
  float: left; /* LTR */
  margin: 0;
  padding: 7px 10px 0px 0px;
  width:100%;
}

#content-tabs ul.secondary {
  border-bottom: 1px solid #555;
  margin-top: 10px;
  text-transform: lowercase;
}

#content-tabs ul.primary li,
#content-tabs ul.secondary li {
  border-style: none;
  display: inline-block;
  float: left; /* LTR */
  list-style: none;
  margin: 0 10px;
  padding: 0;
  white-space:nowrap;
}

#content-tabs ul.primary li a:link,
#content-tabs ul.primary li a:visited,
#content-tabs ul.secondary li a:link,
#content-tabs ul.secondary li a:visited {
  background-color: transparent;
  border: none;
  color: #fff;
  float: left; /* LTR */
  font-weight: bold;
  margin: 0;
  padding: 3px 0 6px 0;
  text-decoration: none;
  white-space: nowrap;
}

#content-tabs ul.secondary li a:link,
#content-tabs ul.secondary li a:visited {
  color: #555;
}

#content-tabs ul.primary li a.active:link,
#content-tabs ul.primary li a.active:visited {
  color: #fff;
  padding-bottom: 2px;
}

#content-tabs ul.secondary li a.active:link,
#content-tabs ul.secondary li a.active:visited {
  color: #fff;
  padding-bottom: 2px;
}

#content-tabs ul.primary li a:hover,
#content-tabs ul.primary li a:focus,
#content-tabs ul.secondary li a:hover,
#content-tabs ul.secondary li a:focus {
  color: #fefefe;
  padding-bottom: 2px;
  font-weight:bold;
}

Ответы [ 5 ]

3 голосов
/ 27 июля 2011

width: auto; сделает это, если только нет других противоречивых правил, которые влияют на размер (например, display: inline; вызовет проблемы).

Блочные элементы с width: auto; расширяются, чтобы занять всю ширину их родителя.

0 голосов
/ 27 июля 2011

Большинство опубликованных решений требуют явной установки ширины каждого li на 25%.Лично я считаю, что это может привести к появлению несовместимых пробелов с обеих сторон текста, заключенного в li, поэтому в таких случаях я предпочитаю использовать таблицу для решения этой проблемы.

это будет работать, вы можете улучшить его внешний вид, но он сделает то, что вы хотите: http://jsbin.com/oqawud/11

0 голосов
/ 27 июля 2011

Возможно, как-то так ... 

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<style>
ul{
  width:600px;
  list-style:none;
}

li{
  float:left;
  width:25%;
}
</style>
0 голосов
/ 27 июля 2011

Если вы хотите, чтобы они располагались рядом, используйте это: 

  ul {
    list-style:none;
    width:600px;
    padding:0;
    overflow:auto;
  }
  li {
    float:left;
    width:25%;
  }

Рабочий пример: http://jsbin.com/oqawud/edit

Если вы хотите их сложить, используйте это: 

  ul {
    list-style:none;
    width:600px;
    padding:0;
    overflow:auto;
  }
  li {
    width:auto;
  }

Рабочий пример: http://jsbin.com/oqawud/2/edit

0 голосов
/ 27 июля 2011 
display:block;

будет легче дать ответ, если вы напишите какой-то код

...