主页 / 问题 / 727168
Accepted
newProgrammer
Asked:2020-10-06 00:50:52 +0000 UTC2020-10-06 00:50:52 +0000 UTC

li 一层高度

  • 772

有时一个li比另一个短：

.ul {
    border:1px solid;
    padding: 10px;
}
.ul > li {
    border:1px solid;
    list-style:none;
    display: inline-block;
    width: 100px;
    vertical-align:top;
}
<ul class="ul">
  <li>Тут какой-то текст</li>
  <li>Тут много текста и еще много много всего</li>
</ul>

它们如何在同一级别上独立于其他人进行对齐。

css

3 个回答

  1. Best Answer

    所以？如果是，那么只需将它们作为表格元素。

    .ul {
    border:1px solid;
    padding: 10px;
    display: table; /* Все блоки - таблица */
    border-spacing: 5px 0; /* Расстояние между ячейками */
}
li {
    border:1px solid;
    list-style:none;
    display: inline-block;
    width: 100px;
    vertical-align:top;
    display: table-cell; /* Блок - элемент таблицы */
    padding: 5px; /* Отступы текста от границ */
}
.block {
  display: block; /* Для частей, которым не нужно выравнивание */
}
    <ul class="ul">
  <li>Тут какой-то текст</li>
  <li>Тут много текста и еще много много всего</li>
  <li class="block">Без выравнивания</li>
</ul>

    • 1

  2. 设置 ul 显示：flex

    .ul {
    border:1px solid;
    padding: 10px;
    display:flex;
}
.ul > li {
    border:1px solid;
    list-style:none;
    display: inline-block;
    width: 100px;
    vertical-align:top;
}
    <ul class="ul">
  <li>Тут какой-то текст</li>
  <li>Тут много текста и еще много много всего</li>
</ul>

    • 1

  3. 正如@empy26 指出的那样，您确实需要使用 flexbox。

    .ul {
    border:1px solid;
    padding: 10px;
    display:flex;
}
.ul > li {
    border:1px solid;
    list-style:none;
    display: inline-block;
    width: 100px;
    vertical-align:top;
}
    <ul class="ul">
  <li>Тут какой-то текст</li>
  <li>Тут много текста и еще много много всего</li>
</ul>

    或者 js 上的更多跨浏览器

    equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.ul li');
});


$(window).resize(function(){
  equalheight('.ul li');
});
    .ul {
    border:1px solid;
    padding: 10px;
}
.ul > li {
    border:1px solid;
    list-style:none;
    display: inline-block;
    width: 100px;
    vertical-align:top;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul">
  <li>Тут какой-то текст</li>
  <li>Тут много текста и еще много много всего</li>
</ul>

    • 1

相关问题