CSS - 水平列表的动态宽度（在列表中的列表中）答案

【问题标题】：CSS - Dynamic width for horizontal list (in a list of a list of a list)CSS - 水平列表的动态宽度（在列表中的列表中）
【发布时间】：2017-07-18 01:01:38
【问题描述】：

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

我能得到的最近的是：

@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>

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

我希望你能帮助我。

【问题讨论】：

标签： css dynamic width

【解决方案1】：

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

我已经删除了你所有的浮动并更改了 for inline-block (hashtags) 和 flex (main ul container)

@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>

【讨论】：

谢谢，这有帮助。不知道 flex 规则，在逐行添加您的解决方案后，我得到了一个线索。
这里有几个有用的链接来了解 flex：A complete guide 和 Flex playground。学习是很好的，因为引导程序正在转向它，而且它允许所有最好的表和浮点数，而没有所有的坏位

【解决方案2】：

请找到解决办法

@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_detail
{
  display: inline-block;
  width: 70%;
 }
.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>
             <li>
              <a href="#">#hashtag</a>
            </li>
             <li>
              <a href="#">#hashtag</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：