关于 CSS 将图标移到左侧

Question

.panel {
margin-bottom: 20px;
background-color: #F7FAFE;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
}
.panel-default {
padding: 10px;
border-color: #ddd
}
.panel-default>.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
.mostPopular {
margin-bottom: 20px;
}
.mostPopular .headText h3 {
font-weight: 700;
margin: 0;
padding-bottom: 17px;
font-size: 17px;
width: auto;
float: left;
margin-right: 10px;
max-width: 275px;
color: #27ae60;
}
.headText {
text-align: center;
width: 100%;
display: inline-block;
}
.headText h2 {
color: #27ae60;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
.mostPopular #pop {
font-size: 100%;
position: relative;
top: -15px;
}
.mostPopular p {
font-family: franklin-gothic-urw-cond, 'Helvetica Condensed Bold', Helvetica, Arial, sans-serif !important;
border-bottom: 3px solid #929292;
color: #768696;
padding: 12px 0 10px;
margin-bottom: 0;
text-align: center;
text-transform: uppercase;
font-size: 12px;
}
.mostPopular li {
border-bottom: 1px solid #ddd;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
padding: 7px 0;
position: relative;
}
.mostPopular li .index {
color: #4e5daf;
display: block;
font-size: 14px;
float: left;
line-height: 18px;
width: 25px;
font-family: franklin-gothic-urw-cond, "Helvetica Condensed Bold", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.mostPopular li a {
text-align: left;
color: #505d69;
font-family: franklin-gothic-urw-cond, 'Helvetica Condensed Bold', Helvetica, Arial, sans-serif !important;
font-size: 13px;
font-weight: 700;
display: block;
line-height: 18px;
width: 235px;
}
.mostPopular li .count {
width: 40px;
color: #4e5daf;
display: block;
float: right;
font-size: 14px;
font-weight: 700;
line-height: 25px;
font-family: franklin-gothic-urw-cond, "Helvetica Condensed Bold", Helvetica, Arial, sans-serif;
}
.headLine {
border-radius: 0px 0px 20px 20px;
width: auto;
height: 0px;
overflow: hidden;
background: #eee;
-moz-box-shadow: 0 -1px 0 #83b755, 0 -2px 0 #4b8424;
background: none;
border-top: none;
border-bottom: 6px solid #3c81de;
position: relative;
top: 10px;
margin-bottom: 15px;
}
.mostPopular #pop {
font-size: 100%;
position: relative;
top: -15px;
}
.mostPopular li .index {
color: #4e5daf;
display: block;
font-size: 14px;
float: left;
line-height: 18px;
width: 25px;
font-family: franklin-gothic-urw-cond, "Helvetica Condensed Bold", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.thumbnaidl {
border-bottom: 3px solid #27ae60;
background: #FFFFFF !important;
margin-top: -25.7px;
padding: 2px;
}
.t11img {
width: 23px;
position:relative;
left: 90%;
}

<div class="panel panel-default">
<div class="mostPopular">
<div class="headText"><h3>Most Popular Free SEO Tools</h3>    </div>
<div id="pop">
<p class="dlLastWeek">Business SEO Tools</p>
<ul style="padding: 0; margin: 0; list-style: none;">
<li>
<span class="index">1.</span> <a class="storyTitle" href="link"><span class="OneLinkNoTx">Worth Your Site</span>
<span class="count"><div style="background: #f39c12;" class="thumbnaidl">
<img alt="Worth Your Site" src="https://www.businessseotools.com/theme/default/icons/open_check.png" class="t11img">
</a> </div></span>
</li>
<li>

你好盖伊，我的网站有一个小问题 在我的笔记本电脑中看起来不错，没有任何问题，就像你在这个屏幕截图中看到的那样 看起来很棒

看起来不错吧？ 但是当我从手机或平板电脑上看到它看起来不像看到的那样干净， 看这里 看看它的外观平板电脑

而这个 看看它的外观

谢谢，我需要帮助盖伊 我的问候

Answer 1

因此，如果我理解清楚，您希望第二张图像看起来像第三张图像，对吧？

若要使其更像第 3 个图像，可以在用于此列表的容器元素上使用max-width属性。

所以像这样：

@media (max-width: 900px) { // When screen is at tablet height (for example)
your-container-element {
max-width: 400px; // This can be relative as well with %, rem, em
}
}

这应该会强制容器的宽度不要太宽。

对于图标/图像，如果使用浮动，则可以使用float: right将它们推向边缘。

如果您使用的是flexbox，则有各种可能的解决方案，如果没有代码示例，这将太长，因此我建议您检查此链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/