切换到移动视图时，我的某些 CSS 无法正常工作

Question

我想知道为什么我的 CSS 代码的某些部分在移动视图中不起作用。请参阅附图。我希望这些链接（速度测试）位于右侧，左侧文本之间有一些 spaces。

screenshot

在桌面上，还可以（有足够的 space），但是当它进入移动视图时，所有链接都粘在左侧文本上。

这是我的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>

和CSS代码：

@media (min-width:961px) {
.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;
padding-left: 20px;
}

.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

尝试缩进

a{
text-indent:  5;
}

Answer 2

你有一个 @media (min-width: 961px) 包装你的 CSS 的 all，它告诉网络浏览器只使用那个 CSS 当宽度window 的至少 960px。因此，当您切换到较小的 window（尤其是移动设备）时，这些样式就会消失。

如果删除它，您的格式会恢复，即使是在狭窄的 window。

这是一个示例，使用您的代码稍作修改的版本。如果您全屏查看它并使 window 宽度小于 400 像素，绿色背景将变为橙色。

.server-section {
  background-color: #ff9966; /* light orange */
  height: 650px;
  width: 100%;
}

@media (min-width: 400px) {
  .server-section {
    background-color: #f8fefa; /* light green */
  }
}

/* After here, everything is from your code. */

.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: #000;
}

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

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

<section class="server-section">
  <div id="left-server">
    <ul>
      <li><span>Las Vegas, NV</span><a href="#">Speed Test</a></li>
      <li><span>Philadelphia, PA</span><a href="#">Speed Test</a></li>
      <li><span>Los Angeles, CA</span><a href="#">Speed Test</a></li>
    </ul>
  </div>
  <div id="center-server">
    <ul>
      <li><span>Dallas, TX</span><a href="#">Speed Test</a></li>
      <li><span>Denver, CO</span><a href="#">Speed Test</a></li>
      <li><span>Bend, OR</span><a href="#">Speed Test</a></li>
    </ul>
  </div>
  <div id="right-server">
    <ul>
      <li><span>Canada</span><a href="#">Speed Test</a></li>
      <li><span>Sweden</span><a href="#">Speed Test</a></li>
      <li><span>Germany</span><a href="#">Speed Test</a></li>
    </ul>
  </div>
</section>

顺便说一句，我不能代表大多数人，但我更愿意看到 min-width: 960px 被用作移动网站的分界线（因为那恰好是我显示器宽度的一半，而且我就像同时打开两个 windows。

Answer 3

尝试在@media 查询之外添加以下内容。您的媒体查询阻止了小于 961 像素的屏幕的任何样式。您需要为较小的屏幕指定样式。

.server-section li span {
  margin-right: 10px;
}

Answer 4

您的媒体查询屏幕比 961px 小，我认为最好为 mobil

创建一个查询

@media (max-width: 599px) {
   .server-section a{
      margin-left: 15px;
   }
}

切换到移动视图时，我的某些 CSS 无法正常工作

Some of my CSS doesn't work when switching to mobile view

css

responsive-design