如何使多个<ul>标签内联

Question

我有三个<ul>标签，我想让它们内联显示或全部显示在同一行。目前，它们被显示为块，看起来是分开的。

而不是显示：

All

Apple Banana Strawberry

Red Green White Blue Purple Blue

我想把它们展示为：

 All Apple Banana Strawberry Red Green White Blue Purple Blue

​

html,
body {
  margin: 0;
  padding: 0;
}

ul.filters {
  display: block;
  width: 100%;
  margin: 0;
  padding: 30px 0;
}

ul.filters>li {
  list-style: none;
  display: inline-block;
}

ul.filters>li>a {
  display: block;
  color: #434e5e;
  text-decoration: none;
  padding: 5px 20px;
}

ul.filters>li>a:hover {
  background-color: orange;
}

ul.filters>li.active>a {
  color: #fff;
  background-color: orange;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <ul class="option-set filters filter-group text-center" data-group="all" data-filter-group="all">
      <li class="active" data-filter="*"><a href="#!">All</a></li>

    </ul>

    <ul class="option-set filters filter-group text-center" data-group="type" data-filter-group="type">
      <li data-filter=".harcos"><a href="#!">Apple</a></li>
      <li data-filter=".technika"><a href="#!">Banana</a></li>
      <li data-filter=".dramatic"><a href="#!">Strawberry</a></li>
    </ul>
    <ul class="option-set filters filter-group text-center" data-group="color" data-filter-group="color">
      <li data-filter=".red"><a href="#!">red</a></li>
      <li data-filter=".green"><a href="#!">green</a></li>
      <li data-filter=".white"><a href="#!">white</a></li>
      <li data-filter=".purple"><a href="#!">purple</a></li>
      <li data-filter=".blue"><a href="#!">blue</a></li>
    </ul>
  </div>
</div>

​

Answer 1

请更新ul.filters的显示属性。见下面的工作小提琴。

注:由于缺少空格，下一行显示紫色和蓝色。

​

html,
body {
  margin: 0;
  padding: 0;
}

ul.filters {
  display: inline;
  width: 100%;
  margin: 0;
  padding: 30px 0;
}

ul.filters>li {
  list-style: none;
  display: inline-block;
  margin-bottom: 15px;
}

ul.filters>li>a {
  display: block;
  color: #434e5e;
  text-decoration: none;
  padding: 5px 20px;
}

ul.filters>li>a:hover {
  background-color: orange;
}

ul.filters>li.active>a {
  color: #fff;
  background-color: orange;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <ul class="option-set filters filter-group text-center" data-group="all" data-filter-group="all">
      <li class="active" data-filter="*"><a href="#!">All</a></li>

    </ul>

    <ul class="option-set filters filter-group text-center" data-group="type" data-filter-group="type">
      <li data-filter=".harcos"><a href="#!">Apple</a></li>
      <li data-filter=".technika"><a href="#!">Banana</a></li>
      <li data-filter=".dramatic"><a href="#!">Strawberry</a></li>
    </ul>
    <ul class="option-set filters filter-group text-center" data-group="color" data-filter-group="color">
      <li data-filter=".red"><a href="#!">red</a></li>
      <li data-filter=".green"><a href="#!">green</a></li>
      <li data-filter=".white"><a href="#!">white</a></li>
      <li data-filter=".purple"><a href="#!">purple</a></li>
      <li data-filter=".blue"><a href="#!">blue</a></li>
    </ul>
  </div>
</div>

​

Answer 2

由于您正在使用引导，所以更好的方法是将<ul>元素封装到引导列(网格)中，这样您还可以在各种屏幕大小上控制这些<ul>元素的宽度和对齐方式，或者您也可以将列类直接赋予<ul>元素。

​

html,
body {
  margin: 0;
  padding: 0;
}

ul.filters {
  display: block;
  width: 100%;
  margin: 0;
  padding: 30px 0;
}

ul.filters>li {
  list-style: none;
  display: inline-block;
}

ul.filters>li>a {
  display: block;
  color: #434e5e;
  text-decoration: none;
  padding: 5px 20px;
}

ul.filters>li>a:hover {
  background-color: orange;
}

ul.filters>li.active>a {
  color: #fff;
  background-color: orange;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
  <div class="row">
   <div class="col-md-4 col-lg-6">
    <ul class="option-set filters filter-group text-center" data-group="all" data-filter-group="all">
      <li class="active" data-filter="*"><a href="#!">All</a></li>

    </ul>
   </div><!-- ./col -->
   <div class="col-md-4 col-lg-6">
    <ul class="option-set filters filter-group text-center" data-group="type" data-filter-group="type">
      <li data-filter=".harcos"><a href="#!">Apple</a></li>
      <li data-filter=".technika"><a href="#!">Banana</a></li>
      <li data-filter=".dramatic"><a href="#!">Strawberry</a></li>
    </ul>
    </div><!-- ./col -->
    <div class="col-md-4 col-lg-6">
    <ul class="option-set filters filter-group text-center" data-group="color" data-filter-group="color">
      <li data-filter=".red"><a href="#!">red</a></li>
      <li data-filter=".green"><a href="#!">green</a></li>
      <li data-filter=".white"><a href="#!">white</a></li>
      <li data-filter=".purple"><a href="#!">purple</a></li>
      <li data-filter=".blue"><a href="#!">blue</a></li>
    </ul>
    </div><!-- ./col -->
  </div>
</div>

​

希望这能有所帮助。

Answer 3

使<ul>项为display: inline-block，并移除width: 100%属性。

​

html,
body {
  margin: 0;
  padding: 0;
}


ul.filters {
  display: inline-block;
  margin: 0;
  padding: 30px 0;
}

ul.filters>li {
  list-style: none;
  display: inline-block;
}

ul.filters>li>a {
  display: block;
  color: #434e5e;
  text-decoration: none;
  padding: 5px 20px;
}

ul.filters>li>a:hover {
  background-color: orange;
}

ul.filters>li.active>a {
  color: #fff;
  background-color: orange;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <ul class="option-set filters filter-group text-center" data-group="all" data-filter-group="all">
      <li class="active" data-filter="*"><a href="#!">All</a></li>

    </ul>

    <ul class="option-set filters filter-group text-center" data-group="type" data-filter-group="type">
      <li data-filter=".harcos"><a href="#!">Apple</a></li>
      <li data-filter=".technika"><a href="#!">Banana</a></li>
      <li data-filter=".dramatic"><a href="#!">Strawberry</a></li>
    </ul>
    <ul class="option-set filters filter-group text-center" data-group="color" data-filter-group="color">
      <li data-filter=".red"><a href="#!">red</a></li>
      <li data-filter=".green"><a href="#!">green</a></li>
      <li data-filter=".white"><a href="#!">white</a></li>
      <li data-filter=".purple"><a href="#!">purple</a></li>
      <li data-filter=".blue"><a href="#!">blue</a></li>
    </ul>
  </div>
</div>

​