【发布时间】：2021-11-30 22:53:39
【问题描述】：
该程序旨在用于移动设备。 为按钮指定颜色会使背景颜色的几个像素可见。 设计意图是在显示器的整个宽度上都有一个可点击的按钮。按钮内容将是左对齐文本、可选右对齐文本和右对齐图像。大多数按钮都可以禁用，所以我不想用 s 代替 s。
我的理解是，当其内容的样式为float 时，它包含一个display: inline-block。这会导致在顶部和底部添加 1px 边框；它在开发者工具中是不可见的。
有没有一种样式会抑制隐藏边框的添加？
HTML 文件。 arrow.png 文件为 46px x 46px。
<!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;
}
【问题讨论】：