给予<li>浮点数：左（或右）
它们都将在同一行中，直到容器中没有更多的空间（您的示例是<ul>）。
如果你在浮动元素后面有一个block元素，它也会粘在浮动元素上，除非你给予它一个clear: both;，或者在它前面放一个空的div，clear: both;。

这可以是一个纯CSS的解决方案。

<ul class="tileMe">
    <li>item 1<li>
    <li>item 2<li>
    <li>item 3<li>
</ul>

CSS将是：

.tileMe li {
    display: inline;
    float: left;
}

现在，由于您已经将显示模式从“block”（隐含）更改为“inline”，因此应用于li元素的任何填充、边距、宽度或高度样式都将无效。

<li><a class="tile" href="home">item 1</a></li>

并添加以下CSS：

.tile a {
    display: block;
    padding: 10px;
    border: 1px solid red;
    margin-right: 5px;
}

此解决方案背后的关键概念是将li的显示样式更改为“inline”，并在其中嵌套块级元素以实现一致的平铺效果。

我建议你使用display: inline;。float在IE中是搞砸了。下面是我将如何处理它的一个例子：

<ul class="side-by-side">
  <li>item 1<li>
  <li>item 2<li>
  <li>item 3<li>
</ul>

下面是CSS：

.side-by-side {
  width: 100%;
  border: 1px solid black;

}
.side-by-side li {
  display: inline;
}

另外，如果使用浮点数，ul将不会环绕li，而是在本例中的高度为0：

.side-by-side li {
  float: left;
}

CSS3灵活流程将发挥神奇的作用

/* This code will do the magic. */
.flex-container {
  display: flex;
  flex-flow: row wrap;
}

/* This code is just to style the inner div elements. */
.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

使用下面的代码浮动这些项，并确保它们以内联方式显示。
ul.myclass li{浮点数：左;显示：内联}
还要确保你放置它们的容器是浮动的，宽度为100%，或者使用其他技术来确保浮动的项包含在容器中，并跟随在容器下面的项。

我使用了上述的组合来达到工作的结果;将float更改为Left并显示阻止li本身HTML：

<ol class="foo">
    <li>bar1</li>
    <li>bar2</li>
</ol>

CSS：

.foo li {
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 2px;
}

在你的css文件中添加这一行：

.classname ul li {
    float: left;
}

对于那些想知道在下一个div元素中添加clear:both是否能解决这个问题的人，它确实能解决这个问题，但在我的例子中，它也清除了下一个元素的边距，所以我的页脚直接粘在我使用float:left对齐的图像下面。
在我看来，更好的方法是在aligned元素下面使用一个新的空div类

<div style="clear:both"></div>

超文本标记语言

<ul class="nav__top-nav-country">
<li class="nav__top-nav-locales-country-name-list">
 United Kingdom </li>
<li class="nav__top-nav-locales-country-name-list">
 Ireland </li>
<li class="nav__top-nav-locales-country-name-list">
 Netherlands </li>
<li class="nav__top-nav-locales-country-name-list">
 France </li>
<li class="nav__top-nav-locales-country-name-list">
 Germany </li>
<li class="nav__top-nav-locales-country-name-list">
 Belgium </li>
</ul>

中央支助组

.nav__top-nav-country {
display: grid;
grid-template-columns: 1fr 1fr;
}