如何设置reponsive内联UL列表

Question

我在他的名单中有一个范围，除了span是ul列表，我不想设置列表全宽，当内容为5 li时可调整大小，我为ul设置宽度但不工作，因为，我的最后一步搬到了新的一排。

这里jsfiddle，调整窗口预览并设置为小，我的ul不行。 我想要仅使用html和css创建响应。 http://jsfiddle.net/n6vm1q1e/

HTML

$html = ob_get_clean()

CSS

<div class="row1 margintop2">
                <span>SPORT</span>
                    <div class="lista">
                        <ul>
                            <li><a href="#">Football</a></li>
                            <li><a href="#">Basketball</a></li>
                            <li><a href="#">Tenis</a></li>
                            <li><a href="#">Other sports</a></li>
                        </ul>
                    </div>
            </div><!--Closed div row1-->

Answer 1

它并不完全清楚，但我认为你想要这样的东西：

＆＃13;

＆＃13;

.row1 {
  width: 100%;
}
.row1 span {
  background-color: #ff0000;
  padding: 10px 20px;
  display: inline-block;
  vertical-align: top;
  color: white;
  width: 14%;
}
.lista {
  display: inline-block;
  width: 71%;
}
.row1 ul {
  display: table;
  list-style-type: none;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 100%;
  vertical-align: middle;
}
.row1 ul li {
  display: table-cell;
  font-size: 0.7em;
  margin-left: 1px;
  text-align: center;
}
.row1 ul li a {
  color: #333;
  text-align: center;
  display: block;
  padding: 10px 20px;
}
.row1 ul li {
  border-left: 1px solid grey;
}
.row1 ul li:first-child {
  border: none;
}

＆＃13;

<div class="row1 margintop2">	<span>SPORT</span>

  <div class="lista">
    <ul>
      <li><a href="#">Football</a>

      </li>
      <li><a href="#">Basketball</a>

      </li>
      <li><a href="#">Tenis</a>

      </li>
      <li><a href="#">Other sports</a>

      </li>
    </ul>
  </div>
</div>
<!--Closed div row1-->

＆＃13;

＆＃13;

＆＃13;