Question

我有li with display：inline，以便它以水平顺序显示。现在我需要添加一个中断行，所以我添加如下所示的内容，

<style>
ul, li {
    display:inline
}
</style>

<ul>
  <li>Coffee</li>
  <li>Tea<br></li>
  <li>Milk</li>
</ul>

我移动了li里面的br，因为否则它会给出一个html验证错误。但是当br在li里面时，它会在新线开始之前增加一个额外的空间。如何摆脱它？

Answer 1

是的，某些浏览器会使用inline和inline-block个元素，因为作为inline元素，标记之间的空格被视为HTML的一部分，浏览器会将其视为this a a sample text which have <span>inline elements</span> and <a href="#">anchor tags</a>与我们在任何内联元素之前提供空间相同

示例

li

在此代码中，我们在内联元素之前有空格，浏览器保留它。因为它是脚本的一部分 在您的情况下使用内联li的情况相同

有很多解决方案，其中一些列在下面

解决方案1 

删除<ul> <li>Coffee </li><li>Tea<br> </li><li>Milk</li> </ul>结束标记

之间的空格

UL

解决方案2

将字体大小'0'应用于父元素li并定义<style> ul, li { display:inline } ul { font-size:0; } li { font-size:1.2em; } </style>的字体大小

{{1}}

<li>使用断行在IE9中添加额外空格</li>

1 个答案: