html - 在手机中打开时，联系人详细信息栏应垂直折叠

Question

这是我的 html 代码:

<div class="topbarsection">
   <ul>
     <li class="alignleft">
       <a href="#">Office Address</a>
     </li>
     <li class="aligncenter">
       Office Timings
     </li>
     <li class="alignright">
       <a href="tel:0123456789">0123456789</a>
     </li>
   </ul>
</div>

这是我的CSS:

.topbarsection {
background-color: #002e5b;
border-bottom: 1px solid #ddd;
color: #fff;
display: block;
font-family: Open Sans,arial;
font-size: 16px;
padding: 10px 5px;
position: fixed;
width: 100%;
z-index: 10000;
}
.topbarsection a {
color: #fff;
}
ul li {
display:inline;
list-style-type:none;
}
.alignleft {
float: left;
width:33.33333%;
text-align:left;
}
.aligncenter {
float: left;
width:33.33333%;
text-align:center;
}
.alignright {
float: left;
width:33.33333%;
text-align:right;
}

在桌面浏览器中，我得到了这个结果，查看屏幕截图 1:

在移动浏览器中，我得到了这个结果，查看屏幕截图 2:

第一个问题是，在桌面浏览器上，手机号码被隐藏，检查 screeshot1。

第二个问题是，在移动浏览器上，所有三个细节都显示在一行中。但我想要这个垂直联系人列表，就像这样，查看截图 3:

Answer 1

你的代码有很多问题。

1. 要解决移动问题，一个选项是使用媒体查询。
2. 如果必须 float ，请使用 clearfix 来防止父级崩溃
3. 去掉 ul 上的默认边距/填充
4. 你不需要在父级上使用 z-index
5. 在最小尺寸处将li的宽度改为100%，并显示:block；这将堆叠。

6. 为移动设备添加视口(viewport)元标记。在 wc3 上搜索

7. 请在您的帖子中提供更多详细信息。 !

这是您更新后的代码——我只修复了 480 像素以下的问题，请使用我的示例添加您自己的查询以改进响应式布局。

让我知道这是否有帮助!!!!!!!!!

<div class="topbarsection clearfix">
   <ul>
     <li class="alignleft">
       <a href="#">Office Address</a>
     </li>
     <li class="aligncenter">
       Office Timings
     </li>
     <li class="alignright">
       <a href="tel:0123456789">0123456789</a>
     </li>
   </ul>
</div>

CSS

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.topbarsection {
background-color: #002e5b;
border-bottom: 1px solid #ddd;
color: #fff;
display: block;
font-family: Open Sans,arial;
font-size: 16px;
padding: 10px 5px;
position: fixed;
width: 100%;
}
.topbarsection a {
color: #fff;
}
ul{
  margin-right:2%;
  padding:0;
}

ul li {
display:inline;
list-style-type:none;
}
.alignleft {
float: left;
width:33.33333%;
text-align:left;
}
.aligncenter {
float: left;
width:33.33333%;
text-align:center;
}
.alignright {
float: left;
width:33.33333%;
text-align:right;
}

@media (max-width: 480px) {
  ul li{
    display: block;
    text-align:center;
    margin:0;
  }
  .alignleft,
  .aligncenter,
  .alignright{
    width:100%;
    text-align:center;
  }
}