文章/答案/技术大牛

发布

社区首页 >问答首页 >如何避免有重叠按钮内容的隐藏边框

问如何避免有重叠按钮内容的隐藏边框
EN

Stack Overflow用户

提问于 2021-11-30 14:19:19

回答 1查看 34关注 0票数 0

该程序将用于移动设备上。为按钮指定颜色会使背景颜色的几个像素可见。设计意图是在显示的整个宽度上有一个可点击的按钮。按钮内容将是左对齐文本，可选的右对齐文本和右对齐图像。大多数按钮都可以禁用，所以我不想用s代替s。

我的理解是，当display: inline-block的内容使用float样式时，它会包含它。这将导致将1px边框添加到顶部和底部；它通过开发人员工具不可见。

是否有一种样式可以抑制隐藏边框的添加？

HTML文件arrow.png文件为46 pxx46px。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Issue</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="merged_mobile.min.css" media="screen">
</head>
<body>
    <div class="content_view">
        <div id="home_page" class="page page_1">
            <h1>Home Page</h1>
            <div class="ul_wrapper">
                <ul>
                    <li>
                        <button class="nav-side-menu-item">
                            <span>Button</span>
                            <img src="arrow.png" alt="arrow" />
                        </button>
                    </li>
                    <li>
                        <div class="nav-side-menu-item">
                            <span>Div</span>
                            <img src="arrow.png" alt="arrow" />
                        </div>
                    </li>
                    <li>
                        <button class="nav-side-menu-item" style="background-color: red;">
                            <span>Colored Button</span>
                            <img src="arrow.png" alt="arrow" />
                        </button>
                    </li>
                    <li>
                        <div class="nav-side-menu-item" style="background-color: red;">
                            <span>Colored Div</span>
                            <img src="arrow.png" alt="arrow" />
                        </div>
                    </li>
                    <li>
                        <button class="nav-side-menu-item" style="background-color: red;">
                            <span>No white space</span><img src="arrow.png" alt="arrow" />
                        </button>
                    </li>
                    <li>
                        <button class="nav-side-menu-item">
                            <span>No Arrow</span>
                        </button>
                    </li>
                    <li>
                        <button class="nav-side-menu-item">
                            <span>Extra</span>
                            <img src="arrow.png" alt="arrow"/>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

merged_mobile.min.css

:root{
--row-height: 67px;
--highlight-color: #077bff;
--tertiary-background-color: #404040;
--primary-font-color: white;
--secondary-font-color: #ccc;
--header-color: #fff;
}

/* Thin */
@font-face {
font-family: "SF Display Thin";
font-display: block;
src: url("../fonts/SF_Pro_Display_Thin.woff2");
}

/* Regular */
@font-face {
font-family: "SF Display Regular";
font-display: block;
src: url("../fonts/SF_Pro_Display_Regular.woff2");
}

html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
min-width: 300px;
}

body{
font-family: 'SF Display Regular', sans-serif;
height: 100%;
background-color: black;
color: white;
padding: 0;
margin: 0;
caret-color: orange;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none;
}

p {
margin: 0;
}

ul {
list-style-type: none;
padding: 0;
margin: 0;
border: none;
outline-style: none;
}

li {
padding: 0;
margin: 0;
}

.ul_wrapper li {
background-color: purple;
border-bottom: 1px white solid;
}

button {
height: 36px;
width: 100%;
cursor: pointer;
padding: 0;
margin: 0;
font-weight: 200;


}
button:focus {
outline-style: none;
}

::-webkit-scrollbar-track
{
background-color: #404040;
}

::-webkit-scrollbar
{
width: 6px;
}

::-webkit-scrollbar-thumb
{
background: dimgray;
}

.content_view {
background-color: yellow;
overflow-x: hidden;
height: 100%;
}

h1 {
    color: brown;
}

.nav-side-menu-item {
color: var(--primary-font-color);
font-size: 20px;
height: var(--row-height);
background-color: transparent;
border: none;
}

.nav-side-menu-item span:first-child{
float: left;
height: 100%;
white-space: nowrap;
width: calc(100% - 150px);
text-align: left;
margin-left: 15px;
overflow: hidden;
text-overflow: ellipsis;
line-height: var(--row-height);
vertical-align: baseline;
}

.nav-side-menu-item:disabled, .nav-side-menu-item:disabled span:first-child {
color: lightslategray;
cursor: not-allowed;
}

.nav-side-menu-item span:nth-child(2), .nav-side-menu-item span:nth-child(3) {
font-size: 14px;
padding-right: 10px;
float:right;
width: 90px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background-color: transparent;
text-align: right;
height: var(--row-height);
line-height: var(--row-height);
vertical-align: baseline;
}
.nav-side-menu-item img{
width: 22px;
height: 22px;
float: right;
margin-top: 22px;
padding-right: 10px;
opacity: 80%;
}

.page {
width: 100%;
height: 100%;
position: absolute;
}

.page_1 {
width: 100%;
height: 100%;
margin-left: 0;
position: absolute;
background-color: orange;
}

.ul_wrapper {
height: -moz-calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);
display: block;
overflow: auto;
background-color: green;
}

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-30 14:53:39

float(s)对li中的间隔产生了级联效应；因此空白(通常人们从未见过)占用了布局中的空间。

这里的简单答案是将line-height: 0;添加到li规则中。这将导致shouldn't-be-visible-in-the-layout-but-is-because-__float空格垂直占据0px，允许它( li)在button(s)的高度附近折叠。

另一种方法是重写button规则，而不依赖于float…这可能是flex 解决方案的理想选择。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70170889

复制

相似问题

问如何避免有重叠按钮内容的隐藏边框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何避免有重叠按钮内容的隐藏边框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何避免有重叠按钮内容的隐藏边框
EN