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：

在Mobile上的浏览器中，我得到了这个结果，请查看屏幕截图2：

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

第二个问题是，在移动浏览器上，所有三个细节都显示在一行中。但我希望这个列表在垂直的联系人，像这样，检查screeshot 3：

Answer 1

您的代码存在很多问题。

要修复移动设备，选项是使用媒体查询。
如果您必须浮动，请使用clearfix以防止父级崩溃
取出ul
您不需要父
以最小尺寸将li的宽度更改为100％，并显示：block;这将堆叠。
为移动设备添加视口元标记。在wc3上搜索
请在帖子中详细说明。！

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

请告诉我这是否有帮助!!!!!!!!!

<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;
  }
}

Answer 2

Ranjeet，试试吧。

将此添加到您的头部：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后像这样替换你的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;
}

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

查看媒体查询！

Answer 3

您可以通过在.topbarsection div中添加一个额外的包装div来解决第一个问题。 padding导致您的内容无法正确排列，因为设置为width: 100%的div不会考虑填充，因此会将其添加到整体宽度。

要解决此问题，请不要在.topbarsection div上使用任何填充，使用适当的填充添加第二个.wrapper div，然后将其内容放入其中。

您可以使用@media查询解决的第二个问题。查找它，一旦屏幕达到一定宽度，您将看到可以为<li>元素设置备用CSS布局。

移动设备打开时，联系人详细信息栏应垂直折叠

3 个答案: