边框在手机上看起来很近答案

【问题标题】：Borders look so close on phone边框在手机上看起来很近
【发布时间】：2018-12-01 16:24:06
【问题描述】：

我用以下 HTML 创建了一个标题：

.menu-item-text-mobile {
    -webkit-transition: border 200ms ease-out;
    -moz-transition: border 200ms ease-out;
    -o-transition: border 200ms ease-out;
    transition: border 200ms ease-out;
    border-bottom: 2.11px solid transparent;
    border-top: 2.11px solid transparent;
    margin-left: 50px;
    display: inline-block;
    padding: 2px;
    margin-bottom: -10px;

}

.menu-item-text-mobile:focus {
    padding: 2px;
    margin-bottom: -10px;

}

.menu-item-text-mobile::after {
    bottom: 1px;
}

#who-menu-mobile:hover .menu-item-text,
#who-menu-mobile:focus .menu-item-text,
#who-menu-mobile:active .menu-item-text {
    border-bottom: 2.11px solid #61f6ff;
    padding: 2px;
    margin-bottom: -10px;

    border-top: 2.11px solid #61f6ff;
}

<span class="menu-item-text">

<span align="center">Headline</span>
</span>

但即使我检查网站时它看起来不错，但当我检查我的手机时，它会忽略 margin-bottom 和 padding CSS，并且边框太靠近我的标题。

这就是我希望边框在 :focus 上的样子。

这就是我目前的看法（边框太近，忽略我的填充/边距）

谢谢！

【问题讨论】：

我想 w3 已经有这方面的教程了，w3schools.com/css/css_rwd_mediaqueries.asp
向.mobile-item-text 元素添加一些填充。 padding: 5px 0;
@MarcHjorth 我试过了，但它仍然没有出现在手机上
您可能有一些 CSS 覆盖了填充？ @RoziBuber

标签： html css wordpress menu

【解决方案1】：

你可以像这样为元素添加内边距

li.with-padding {
    padding: 5px 0; /* <-- Magic goes here */
}


li {
    border-bottom: 2.11px solid #61f6ff;
    border-top: 2.11px solid #61f6ff;
}

li+li { /* Add margin top to second li */
  margin-top: 10px
}

<ul>
  <li class="with-padding">This is with padding</li>
  <li>This is without padding</li>
</ul>

Fiddle example

【讨论】：