在所有电话设备上将内容保留在一行中
在所有电话设备上将内容保留在一行中
提问于 2018-06-24 23:51:45
我创建了一个汉堡包移动菜单，并尝试在该菜单中包含联系方式。
我尝试了两种方法:第一种方法适用于除iPhones和其他主要使用safari的设备以外的所有设备。然后，包含文本的行将中断。
这种方法还涉及到媒体查询。我必须说，当你用你的桌面检查它时，它看起来很好，但在实际的电话设备上，线路在图标之后一分为二。
下面是这种方法的源代码：
<div class="elementor-widget-container">
<div class="elementor-text-editor elementor-clearfix">
<p class="makeSmall" style="text-align: center;">
<a href="mailto:maya@mayabarber.co.il">
<img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"> </a>
<a href="https://www.facebook.com/mayabarbercontrolcenter/"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"> <label style="color: #61f6ff;" data-mce-fragment="1">|</label></a> <span class="" style="color: #001a71;" data-mce-fragment="1"><a href="tel:0526582643"> 052-6582643</a></span></p>
</div>
</div>我试过的第二种方法，有点有效，但图标看起来比我定义的px的量小，而且看起来很乱。
<div class="elementor-text-editor elementor-clearfix elementor-inline-editing" data-elementor-setting-key="editor" data-elementor-inline-editing-toolbar="advanced">
<p class="makeSmall" style="text-align: center;">
<a href="mailto:maya@mayabarber.co.il">
<img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"> </a>
<a href="https://www.facebook.com/mayabarbercontrolcenter/"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"> <label style="color: #61f6ff;" data-mce-fragment="1">|</label></a> <span class="" style="color: #001a71;" data-mce-fragment="1"><a href="tel:0526582643"> 052-6582643</a></span></p>
</div>CSS代码：
.mobilemenucontact {
white-space: nowrap;
position: relative;
width: 100%;
display: inline-block;
}
#mobilemenucontact {
white-space: nowrap;
position: relative;
width: 100%;
display: inline-block;
}
@media only screen and (max-width: 375px) {
.makeSmall {
font-size: 95%;
}
}
@media only screen and (max-width: 375px) {
.email-mobile {
width: 28px;
}
}
@media only screen and (max-width: 375px) {
.facebook-mobile {
width: 28px;
}
}
@media only screen and (max-width: 375px) {
.column-contact {
padding: 5px 30px;
}
}
.active {
border-bottom: 2.11px solid #61f6ff;
padding: 4px;
box-sizing: border-box;
margin-bottom: 4px;
}所以我不确定该使用哪种方法，我只想让这两个图标和电话号码保持在线状态，无论它是什么浏览器或电话设备。我也希望之间的空间是相等的，我希望图标是33px的宽度。
这是您可以检查这两种方法的网站：www.mayabarber.co.il
如果你喜欢生成自己的响应式HTML/CSS代码，而忽略我笨拙的尝试，以下是我希望它看起来的样子：
谢谢!
回答 2
Stack Overflow用户
发布于 2018-06-25 00:26:04
根据上面给定的链接，如果您只需将以下CSS添加到要应用此更改的媒体屏幕，我猜您的问题就会得到解决。
此外，您还可以减少填充或在%而不是px中进行设置。
.elementor-nav-menu a{
display: inline-flex;
}希望这能对你有所帮助。
Stack Overflow用户
发布于 2018-06-25 01:30:10
您的标记过于复杂，所以我创建了一个包含链接的列表，并使用flex-box & align-items:center对齐它。
.social-links {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
}
.social-links li {
padding: 10px 4px;
}
.social-links li.with-separator {
border-left: 1px solid #61f6ff;
margin-left: 16px;
padding-left: 20px;
}
.social-links li img {
vertical-align: middle;
}
.social-links a {
text-decoration: none;
color: #494c4f;
}
@media only screen and (max-width: 375px) {
.social-links {
flex-direction: column;
}
.social-links li.with-separator {
border-left: 0;
border-top: 1px solid #61f6ff;
margin-left: 0;
padding-left: 4px;
}
}<ul class="social-links">
<li>
<a href="mailto:maya@mayabarber.co.il" class="icon"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"></a>
</li>
<li>
<a href="https://www.facebook.com/mayabarbercontrolcenter/" class="icon"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"></a>
</li>
<li class="with-separator"><a href="tel:0526582643">052-6582643</a></li>
<li class="with-separator"><a href="tel:048201996">04-8201996</a></li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51011535
复制相关文章
相似问题