如何在台式机、平板电脑和移动设备上获得相同的显示

Question

我正在为从其他开发人员那里继承的客户构建网页。链接是：http://up8.431.myftpupload.com/。客户希望顶部栏中的电话号码和社交图标在所有设备上以相同的样式显示：台式机、平板电脑和移动设备。她不喜欢当显示屏变得足够小时，电话号码和社交图标如何堆叠在一起。没关系，但如果没有左右展示的空间，但如果有的话，她想保持相同的风格。问题是，我不知道如何做到这一点。

在检查元素时，我注意到每个块都有一个 auto 宽度，或者它需要适应的任何宽度。我尝试给每个块一个 display:inline 规则，希望它们能够采用内容宽度并从左到右对齐，然后我可以将社交图标浮动到右侧。

试过这样的：

#top-bar-content, #top-bar-social
{
display:inline;
}

与

.top-bar-left, #top-bar-right
{
display:inline;
}

我希望会发生的是两个块都将内联显示，背靠背，我可以分别左右浮动它们。实际发生的是电话号码改变了它的宽度以适应内容并完全按照我想要的方式向左浮动。然而，社交障碍并没有。它失去了维度；检查元素后，我发现它的宽度和高度为 0x0。它仍然在同一个地方。就像我说的那样，在我的脑海中，我希望它采用它的内容宽度并坐在电话号码旁边。

我确定这只是一个菜鸟错误，我只是看不到我面前的东西。我非常感谢您提前提供的任何帮助。

Answer 1

我会将包含数字和社交图标的父 div 更改为 display:flex。然后将 justify-content:space-evenly 或 space-around 或 space-between （在它们之间进行实验）添加到同一个父元素。

因此，您必须使用媒体查询才能将其仅应用于移动设备。在桌面设备上应用此功能时，会受到其他类和“::after”伪代码的干扰。

#top-bar-inner {
    position: relative;
    display: flex;
    justify-content: space-evenly;
}

这样就可以了