在以下浏览器上它工作正常:
- Safari
- 互联网浏览器
但在 Google Chrome 上,modeUser
高于 tbSearch
和 btnSearch
。
在下面的代码中,您可以看到 modeUser
在 Google Chrome 上高于 tbSearch
和 btnSearch
。我该如何解决?
这是我的 HTML 和 CSS 代码:
table tr td {
border: 1px solid;
}
/*css search*/
.searchBar {
float: right;
margin-right: 20px;
}
#modeUser {
padding-right: 6px;
height: 27px;
}
#btnSearch {
background-color: #267bcd;
color: white;
border: solid 1px #267bcd;
}
.btn_w {
border-radius: 3px;
font-size: 12px;
height: 25px;
border: solid 1px #bebebe;
padding: 0 9px;
}
#tbSearch {
width: 98px;
}
select::-ms-expand {
display: none;
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
}
select,
.msandsafa {
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
background-repeat: no-repeat;
background-position-x: 44px;
background-position-y: -1px;
border: solid 1px #ccc;
width: 66px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0033)http://gw.hallaencom.com/UI/_EDMS -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body oncontextmenu="return false">
<input style="width:100%" type="text">
<div>
<div class="searchBar">
<select id="modeUser" class="btn_w" name="modeUser">
<option value="0">이름</option>
<option value="1">아이디</option>
</select>
<input id="tbSearch" name="tbSearch" type="text" class="tb_m btn_w" style="" value="">
<input type="button" id="btnSearch" class="btn_w" value="검색">
</div>
</body>
</html>
最佳答案
我认为这对你有帮助:
将“display: flex”添加到“.searchBar”并从“#modeUser, .btn_w”中删除高度属性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0033)http://gw.hallaencom.com/UI/_EDMS -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<style>
table tr td{
border: 1px solid;
}
/*css search*/
.searchBar {
margin-right: 20px;
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
#modeUser {
padding-right: 6px;
}
#btnSearch {
background-color: #267bcd;
color: white;
border: solid 1px #267bcd;
}
.btn_w {
border-radius: 3px;
font-size: 12px;
border: solid 1px #bebebe;
padding: 6px 9px;
margin: 0 2px;
}
#tbSearch {
width: 98px;
}
select::-ms-expand {
display: none;
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
}
select, .msandsafa {
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
background-repeat: no-repeat;
background-position-x: 44px;
background-position-y: 50%;
border: solid 1px #ccc;
width: 66px;
}
</style>
</head>
<body oncontextmenu="return false">
<input style="width:100%" type="text">
<div>
<div class="searchBar">
<select id="modeUser" class="btn_w" name="modeUser">
<option value="0">이름</option>
<option value="1">아이디</option>
</select>
<input id="tbSearch" name="tbSearch" type="text" class="tb_m btn_w" style="" value="">
<input type="button" id="btnSearch" class="btn_w" value="검색">
</div>
</body>
</html>
关于html - 选择高于 chrome 中的文本框和按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55217449/