ul li{
  display: inline;
}

有关更多信息，请参阅listamatic上的basic list options和a basic horizontal list。（感谢下面的Daniel Straight链接）。
此外，正如评论中指出的那样，你可能希望在ul和li内部的任何元素以及li本身上进行样式设计，以使事情看起来漂亮。

在现代浏览器中，您可以执行以下操作（符合CSS3）

ul
{
  display:flex;  
  list-style:none;
}

<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

HTML代码：

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS代码：

ul.list li{
  width: auto;
  float: left;
}

也可以尝试这样的东西：
HTML

<ul class="inlineList">
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

CSS

.inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

我做了一个codepen来说明：http://codepen.io/agm1984/pen/mOxaEM

在bootstrap中使用.list-inline css类

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

参考：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h

方法1：使用浮点概念：

ul li {
float: left;
list-style: none;
margin-right: 15px;
}

<ul>
  <li><a href="">List item 1</a></li>
  <li><a href="">List item 2</a></li>
  <li><a href="">List item 3</a></li>
</ul>

方法2：使用display inline属性

ul li {
  display: inline;
  list-style: none;
  margin-right: 15px;
}

<ul>
  <li><a href="">List item 1</a></li>
  <li><a href="">List item 2</a></li>
  <li><a href="">List item 3</a></li>
</ul>

方法3：使用显示内联块属性

ul li {
  display: inline-block;
  list-style: none;
  margin-right: 15px;
}

<ul>
  <li><a href="">List item 1</a></li>
  <li><a href="">List item 2</a></li>
  <li><a href="">List item 3</a></li>
</ul>

方法4：使用Flex属性- Modern One

ul {
display: flex;
list-style: none;
gap: 15px;
}

<ul>
  <li><a href="">List item 1</a></li>
  <li><a href="">List item 2</a></li>
  <li><a href="">List item 3</a></li>
</ul>

方法5：使用网格属性- Modern One

ul {
display: grid;
list-style: none;
grid-auto-flow: column;
gap: 15px;
grid-auto-columns: max-content;
}

<ul>
  <li><a href="">List item 1</a></li>
  <li><a href="">List item 2</a></li>
  <li><a href="">List item 3</a></li>
</ul>

方法6：使用表格法-旧方法1

ul {
display: table;
}
ul li {
  display: inline-table;
  margin-left: 15px;
}

<ul>
  <li><a href="">List item 1</a></li>
  <li><a href="">List item 2</a></li>
  <li><a href="">List item 3</a></li>
</ul>

谢谢...

li {
  float: left;
  margin: 0 20px;
}

列表中有一行带点