CSS - 水平列表的动态宽度(在列表的列表列表中)

Question

我正在尝试实现这种布局:

我能得到的最近的是:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.project_thumbnail_info {
  margin: 10px 0px 0px 0px;
  padding: 0;
  list-style: none;
}

.project_thumbnail_info li {
  margin: 0 15px 0 0;
  padding: 0;
  list-style: none;
  float: left;
  clear: right;
}

.project_thumbnail_info li ul {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
}

.project_thumbnail_info li ul li {
  float: left;
  clear: both;
}

.project_thumbnail_info_avatar {
  width: 35px;
  height: 35px;
}

.project_thumbnail_info_hashtags li {
  float: left!important;
  clear: right!important;
  padding: 0px 8px 0px 0px;
  margin: 0;
  display: block;
}

h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

h2 a {
  color: #000;
}

<div class="col-xs-12 col-sm-6 col-lg-4 col-md-6">
  <img src="http://lorempixel.com/400/200/" class="img-responsive" />
  <ul class="project_thumbnail_info">
    <li class="project_thumbnail_info_avatar">
      <img src="http://lorempixel.com/400/400/" class="img-responsive">
    </li>
    <li class="project_thumbnail_info_detail">
      <ul>
        <li>
          <h2><a href="#">dem hinterfragen</a></h2>
        </li>
        <li>
          <ul class="project_thumbnail_info_hashtags">
            <li>
              <a href="#">#hashtag</a>
            </li>
            <li>
              <a href="#">#hashtag</a>
            </li>
            <li>
              <a href="#">#hashtag</a>
            </li>
            <li>
              <a href="#">#hashtag</a>
            </li>
            <li>
              <a href="#">#hashtag</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

问题是，万一列变小(或添加了更多主题标签)，标题和主题标签会向下跳，因为没有剩余空间。这不是我想要的，但我找不到任何解决方案。

我希望你能帮助我。

Answer 1

您可以使用 display:flex 来实现您想要的。

我已经删除了你所有的 float 并更改了内联 block (hashtags)和 flex(主要 ul 容器)

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.project_thumbnail_info {
  margin: 10px 0px 0px 0px;
  padding: 0;
  list-style: none;
  display: flex;
}

.project_thumbnail_info_detail {
  flex-grow: 1;
}

.project_thumbnail_info li {
  margin: 0 15px 0 0;
  padding: 0;
  list-style: none;
}

.project_thumbnail_info li ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project_thumbnail_info_avatar {
  width: 35px;
  height: 35px;
}

.project_thumbnail_info_hashtags li {
  padding: 0px 8px 0px 0px;
  margin: 0;
  display: inline-block;
}

h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

h2 a {
  color: #000;
}

<div class="col-xs-12 col-sm-6 col-lg-4 col-md-6">
  <img src="http://lorempixel.com/400/200/" class="img-responsive" />
  <ul class="project_thumbnail_info">
    <li class="project_thumbnail_info_avatar">
      <img src="http://lorempixel.com/400/400/" class="img-responsive">
    </li>
    <li class="project_thumbnail_info_detail">
      <ul>
        <li>
          <h2><a href="#">dem hinterfragen</a></h2>
        </li>
        <li>
          <ul class="project_thumbnail_info_hashtags">
            <li>
              <a href="#">#hashtag</a>
            </li>
            <li>
              <a href="#">#hashtag</a>
            </li>
            <li>
              <a href="#">#hashtag</a>
            </li>
            <li>
              <a href="#">#hashtag</a>
            </li>
            <li>
              <a href="#">#hashtag</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>