Question

我正在为我从另一个开发人员继承的客户端构建网页。链接为：http://up8.431.myftpupload.com/。客户希望顶部栏中的电话号码和社交图标在所有设备（台式机，平板电脑和移动设备）上以相同的样式显示。她不喜欢显示屏变小时电话号码和社交图标彼此叠加的方式。很好，但是如果没有空间可以左右显示它们，但是如果有，她希望保持相同的样式。问题是，我不知道如何实现这一目标。

在检查元素时，我注意到每个块的宽度均为auto或需要插入的宽度。我尝试为每个块显示一个display：inline规则，希望它们采用内容宽度然后从左向右对齐，然后我就可以将社交图标向右浮动。

尝试过这样的事情：

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

AND

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

我希望会发生的是，两个块都将内联显示为内联，并且可以分别向左和向右浮动它们。实际发生的是电话号码更改了宽度以适合内容，并按照我的意愿将其自身浮动到左侧。但是，社会障碍却没有。它失去了尺寸。在检查元素时，我发现它的宽度和高度为0x0。它仍然在同一地点。就像我说的那样，我希望它采用其内容宽度并紧靠电话号码。

我确定这只是一个菜鸟错误，我只是看不到我的眼前。我真的很感谢任何帮助。

Answer 1

我将包含数字和社交图标的父div更改为display：flex。然后将justify-content：均匀空间，周围空间或中间空间（它们之间的实验）添加到同一父元素。

因此，您将必须使用媒体查询将其仅应用于移动设备。将其应用于桌面设备时，其他类和“ :: after”伪代码会产生一些干扰。

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

这可以解决问题

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

1 个答案: