Question

我有一个高度为270像素的li元素。其中有10个li个元素。我希望所有li元素都是垂直对齐 - 即顶部和底部* { margin: 0; padding: 0; } ul { height: 270px; width: 250px; color: #afafaf; border: 1px dotted red; } li { width: 240px; }元素必须分别触及容器的顶部和底部，其余元素应调整他们的间距。我对任何元素的显示类型没有任何问题。 'li'元素可以是内联，内联块或块级别。以下是代码：

<ul>
  <li>- Web/UI Design</li>
  <li>- Web Development</li>
  <li>- CMS Integerations(WP, Joomla)</li>
  <li>- Logo & Banner Design</li>
  <li>- PSD to XHTML, CSS 3.0, HTML5</li>
  <li>- PHP & MySQL</li>
  <li>- jQuery, Ajax, Flash(ActionScript)</li>
  <li>- Landing Page Design & SEO</li>
  <li>- SEO(Search Engine Optimization)</li>
  <li>- E-Commerce & Shopping Cart</li>

</ul>

display: flexbox

不提及我已经完成了各种帖子，解释了如何垂直对齐元素。我希望他们合理。我知道可以使用flexbox来完成，但我也希望定位不支持var e1Ids = new [] { 1, 2, 3 }; var e3s = DBSetE1.AsQueryable().Where(e => e1Ids.Contains(e.Id)) .SelectMany(e => e.E2List) .SelectMany(e => e.E3List);的旧浏览器。

Answer 1

这似乎符合您的要求：

＆＃13;

* { margin: 0; padding: 0; }
ul {
  height: 270px;
  width: 250px;
  color: #afafaf;
  border: 1px dotted red;
  display: table;
}
li {
  width: 240px;
  display: table-row;
}

＆＃13;

<ul>
  <li>- Web/UI Design</li>
  <li>- Web Development</li>
  <li>- CMS Integerations(WP, Joomla)</li>
  <li>- Logo & Banner Design</li>
  <li>- PSD to XHTML, CSS 3.0, HTML5</li>
  <li>- PHP & MySQL</li>
  <li>- jQuery, Ajax, Flash(ActionScript)</li>
  <li>- Landing Page Design & SEO</li>
  <li>- SEO(Search Engine Optimization)</li>
  <li>- E-Commerce & Shopping Cart</li>

</ul>

＆＃13;

Answer 2

只需添加“line-height：1.7;”你的李。将会完成。如下所示

* { margin: 0; padding: 0; }
ul {
  height: 270px;
  width: 250px;
  color: #afafaf;
  border: 1px dotted red;
}
li {
  width: 240px;
    line-height: 1.7;
}

<ul>
  <li>- Web/UI Design</li>
  <li>- Web Development</li>
  <li>- CMS Integerations(WP, Joomla)</li>
  <li>- Logo & Banner Design</li>
  <li>- PSD to XHTML, CSS 3.0, HTML5</li>
  <li>- PHP & MySQL</li>
  <li>- jQuery, Ajax, Flash(ActionScript)</li>
  <li>- Landing Page Design & SEO</li>
  <li>- SEO(Search Engine Optimization)</li>
  <li>- E-Commerce & Shopping Cart</li>

</ul>

如何在没有flexbox的情况下垂直对齐容器中的元素？

2 个答案: