CSS基础测试9：文本标题与标签排版

[wingmeng]

题目：

---

我的回答：

首先想到了用 display: table 方案，但几经尝试没 hold 住，后改用 float 实现：> 在线 Demo <

1. 为了兼容 IE8 下右浮动元素与非浮动元素的对齐，HTML 标签顺序未能与可视效果相一致（界面显示上标题在前，标签在后，而 HTML 代码中标签在前，标题在后）；
2. 第 2 题，宽度不足时会截断标题文本，其他浏览器是从左侧开始截断的（符合题意），而 IE（8~11）下是从右侧开始截断的。

<!-- 1 -->
<ul class="book-list">
  <li class="book-list-item">      
    <div class="book-tags">
      <span class="tag">都市</span>
      <span class="tag" theme="red">连载中</span>
      <span class="tag" theme="blue">54.82万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">这次是一个新的故事。浩劫余生，终见光明</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">都市</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">穿越天地复苏的平行世界，偶获诸天聊天群</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">科幻</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1059.98万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">修真四万年</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">童话</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">The quick brown fox jumps over a lazy dog.</a>
    </h3>
  </li>
</ul>

<!-- 2 -->
<ul class="book-list is-inverse">
  <li class="book-list-item">      
    <div class="book-tags">
      <span class="tag">都市</span>
      <span class="tag" theme="red">连载中</span>
      <span class="tag" theme="blue">54.82万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">这次是一个新的故事。浩劫余生，终见光明</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">都市</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">穿越天地复苏的平行世界，偶获诸天聊天群</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">科幻</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1059.98万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">修真四万年</a>
    </h3>
  </li>
  <li class="book-list-item">
    <div class="book-tags">
      <span class="tag">童话</span>
      <span class="tag" theme="red">完本</span>
      <span class="tag" theme="blue">1万字</span>
    </div>
    <h3 class="book-title">
      <a class="book-title-link" href="##">The quick brown fox jumps over a lazy dog.</a>
    </h3>
  </li>
</ul>

.book-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.book-list-item {
  margin: .8em 0;
  line-height: 1.2;
  font-size: 18px;
}
.book-list-item:after {
  content: "";
  clear: both;
  display: table;
}

.book-title {
  margin: 0;
  font-size: 100%;
  font-weight: 500;
}

.book-title-link {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  text-decoration: none;
  color: #9da2a9;
}
.book-title-link:hover {color: #498bed;}

.is-inverse .book-title-link {direction: rtl;}

.book-tags {
  float: right;
  margin-left: 1em;
}    
.tag {
  display: inline-block;
  padding: 3px;
  white-space: nowrap;
  line-height: 1;
  font-size: 82%;
  color: #9da2a9;
  border: 1px solid;
  border-radius: 2px;
}
.tag[theme="red"] {color: #ee4e54;}
.tag[theme="blue"] {color: #498bed;}

[wingmeng]

自我评分：优秀

优秀、良好、一般、差劲

学习收获：

1. 双 table layout