我正在使用如下所示的有序列表，我想在图像周围包裹float: right:数字2文本，该文本应放在右侧。此时，在向其添加<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>{{1}}＆＃13;
答案 0 :(得分：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>
答案 1 :(得分：0)
如果你想在这里使用浮点数 - 而且与许多关于float的堆栈溢出问题不同，你实际上将它用于它的目的！ - 您需要进行两项更改：
添加clear以防止重叠。在这种情况下，看起来有必要添加一个显式的clearfix div;只清楚图像本身（使用.alignright:after）意味着<a>的背景颜色并不总是完全包含图像。
将图像放在要浮动的文本之前，而不是放在最后。
除了这些更改之外，这与您现有的代码相同：
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; }
.clearfix { clear:both }<ol class="rounded-list">
<li><a href="">List item</a></li>
<li><a href=""><img class="alignright" src="http://via.placeholder.com/290x290"> An example with a large image and not enough text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="clearfix"></div></a></li>
<li><a href=""><img class="alignright" src="http://via.placeholder.com/90x90"> An example with a smaller image. 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. 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.
<div class="clearfix"></div></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>
答案 2 :(得分：0)
此处无需使用float ...尝试在display:flex中使用<a>
Stack Snippet
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: flex;
align-items: flex-start;
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 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/100x100"></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>