Question

我正在使用社交按钮，它在大型显示器上正常工作，但是在小尺寸的Web浏览器上，它产生的输出就像图像＆＃34; enter image description here＆＃34;请提供解决方案

感谢

Answer 1

如果没有代码示例，很难明确回答这个问题，但您应该能够通过在css文件中使用媒体查询来更改按钮在较小屏幕上的显示方式。

根据图像判断，您可能需要从容器元素中删除一些边距并调整按钮的大小。

看一下示例的以下代码：

＆＃13;

.social-container {
  list-style-type:none;
  }

.social-container li {
  float:left;
 }

.social-container li + li {
  margin-left: 10px;
 }

.social-container li button {
  height: 100px;
  width: 100px;
  padding: 10px;
}

// set max-width to desired width 
@media screen and (max-width: 640px) {
  .social-container li {
    float: none;
    margin-left: 0;
    }
  
  .social-container li button{
    height: 50px;
    width: 500px;
    }
}

＆＃13;

<ul class=social-container>
  <li><button>FB</button></li>
  <li><button>Twitter</button></li> 
  <li><button>Github</button></li> 
</ul>

＆＃13;

如果您提供有关代码的更多详细信息，我将展开示例

小尺寸设备中的社交按钮对齐

1 个答案: