html - 在列表项中 float 图像

Question

我正在使用如下所示的有序列表，我想包装 <li>图像周围的数字 2 文本，应放置在右侧。此时，在添加 float: right: 时图像被推到有序列表后面。给它。

如何在 <li> 中将文字环绕在图像周围我订购的列表中的元素？

ol {
  counter-reset: li;
  /* Initiate a counter */
  list-style: none;
  /* Remove default numbering */
  *list-style: decimal;
  /* Keep using default numbering for IE6/7 */
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0;
  margin-bottom: 4em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

ol ol {
  margin: 0 0 0 2em;
  /* Add some left margin for inner lists */
}

.rounded-list a {
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  *padding: .4em;
  margin: .5em 0;
  background: #ddd;
  color: #444;
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out;
}

.rounded-list a:hover {
  background: #eee;
}

.rounded-list a:hover:before {
  transform: rotate(360deg);
}

.rounded-list a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #87ceeb;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
}

.alignright {
  float: right;
}

<ol class="rounded-list">
  <li><a href="">List item</a></li>
  <li><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<img class="alignright" src="http://via.placeholder.com/290x290"></a></li>
  <li><a href="">List item</a>
    <ol>
      <li><a href="">List sub item</a></li>
      <li><a href="">List sub item</a></li>
      <li><a href="">List sub item</a></li>
    </ol>
  </li>
  <li><a href="">List item</a></li>
  <li><a href="">List item</a></li>
</ol>

Answer 1

这对你有用吗？

ol {
  counter-reset: li;
  /* Initiate a counter */
  list-style: none;
  /* Remove default numbering */
  *list-style: decimal;
  /* Keep using default numbering for IE6/7 */
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0;
  margin-bottom: 4em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

ol ol {
  margin: 0 0 0 2em;
  /* Add some left margin for inner lists */
}

.rounded-list a {
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  *padding: .4em;
  margin: .5em 0;
  background: #ddd;
  color: #444;
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out;
}

.rounded-list a:hover {
  background: #eee;
}

.rounded-list a:hover:before {
  transform: rotate(360deg);
}

.rounded-list a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #87ceeb;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
}

ol.rounded-list > li:nth-child(2):after {
  content: " ";
  display: block;
  clear: both;
}
ol.rounded-list > li:nth-child(2) a {
  display: block;
  float: left;
}
.alignright {
  float: right;
}

<ol class="rounded-list">
  <li><a href="">List item</a></li>
  <li><a href=""><img class="alignright" src="http://via.placeholder.com/290x290">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</a></li>
  <li><a href="">List item</a>
    <ol>
      <li><a href="">List sub item</a></li>
      <li><a href="">List sub item</a></li>
      <li><a href="">List sub item</a></li>
    </ol>
  </li>
  <li><a href="">List item</a></li>
  <li><a href="">List item</a></li>
</ol>