html - 我怎样才能使这个 CSS 部分移动友好？

Question

我在我的新 HTML 模板中添加了一个新部分，其中显示了国旗和一些其他信息。但是正如你在这段视频中看到的那样，当我切换到移动 View 时它会被破坏。但在桌面模式下没问题。

原始模板是新的且适合移动设备使用，但只有我添加的这个新部分无法在移动设备上使用。 视频:see here

这是 HTML 代码:

<section class="server-section">
<div id="left-server">
<ul>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Las Vegas, NV</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Philadelphia, PA</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Los Angeles, CA</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Ashburn, VA</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Garden City, NY</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Chicago, IL</span><a href="#">Speed Test</a></li>
</ul>
</div>
<div id="center-server">
<ul>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Dallas, TX</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Denver, CO</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Bend, OR</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Phoenix, AZ</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Seattle, WA</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Boston, MA</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Miami, FL</span><a href="#">Speed Test</a></li>
</ul>
</div>
<div id="right-server">
<ul>
<li><img src="images/icons/flags/ca.png" alt="Canada Flag" /> <span>Canada</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/se.png" alt="USA Flag" /> <span>Sweden</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/de.png" alt="USA Flag" /> <span>Germany</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/nl.png" alt="USA Flag" /> <span>Netherlands</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/ch.png" alt="USA Flag" /> <span>Switzerland</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/uk.png" alt="USA Flag" /> <span>England</span><a href="#">Speed Test</a></li>
</ul>
</div>
</section><div class="clear"></div>

这是 CSS 代码:

.server-section{
    padding:50px 0px 300px;
    height: 650px;
    background-color:#f8fefa;
    width:100%;
    background-image:url("../images/resource/server-location.jpg");
}

.server-section ul {
    list-style-type: none;
}

.server-section li {
    border-bottom: 1px solid #d4d1cb;
}

.server-section li span {
    display: inline-block;
    padding: 15px;
    color: #fff;
}

.server-section li a {
    float: right;
    position: relative;
    top: 20px;
    color: #00fc97;
}

.server-section li a:hover {
    color: #fff;
}

.server-section li img {
    margin-right: 20px;
}

.server-section #left-server {
    float:left;
    margin-left:35px; 
    width: 30%;
}

.server-section #center-server {
    float:left; 
    width: 25%;
    margin-left:50px;
}

.clear{
    clear:both;
}

.server-section #right-server {
    float:left;
    margin-left:45px; 
    width: 28%;
}

Answer 1

你在这里复制你的CSS样式:

@media screen and (max-width: 600px) {

.server-section{
    padding:50px 0px 300px;
    height: 650px;
    background-color:#f8fefa;
    width:100%;
    background-image:url("../images/resource/server-location.jpg");
}

.server-section ul {
    list-style-type: none;
}

.server-section li {
    border-bottom: 1px solid #d4d1cb;
}

.server-section li span {
    display: inline-block;
    padding: 15px;
    color: #fff;
}

.server-section li a {
    float: right;
    position: relative;
    top: 20px;
    color: #00fc97;
}

.server-section li a:hover {
    color: #fff;
}

.server-section li img {
    margin-right: 20px;
}

.server-section #left-server {
    float:left;
    margin-left:35px; 
    width: 30%;
}

.server-section #center-server {
    float:left; 
    width: 25%;
    margin-left:50px;
}

.clear{
    clear:both;
}

.server-section #right-server {
    float:left;
    margin-left:45px; 
    width: 28%;
}
}