时间戳

首页 > 解决方案 > 我怎样才能使这个 CSS 部分移动友好？

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

问题描述

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

原始模板是新的并且对移动设备友好，但只有我添加的这个新部分在移动设备中不起作用。视频：看这里

这是 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%;
}

标签： htmlcss

解决方案

你在这里复制你的 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%;
}
}

推荐阅读