不知道為什么，但是每當我更改導航選單上搜索欄旁邊的鏈接時，由于某種原因，輸入會略微向下移動。我不知道如何解釋它......
@import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@500&display=swap');
body {
margin: 0px;
}
.top-nav-bar {
background-color: #292929;
height: 55px;
text-align: center;
font-family: 'Open Sans', sans-serif;
color: #DDDDEB;
font-size: 50px;
}
.spacer {
margin: 5px;
display: inline;
cursor: help;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #597BEB;
}
.searchbar {
font-size: 16px;
border-width: 2px;
border-color: #CCCCCC;
background-color: inherit;
border-style: solid;
border-radius: 50px;
width: 150px;
height: 50px;
}<div class="top-nav-bar">
<a href="#">Home</a>
<div class="spacer"></div>
<a href="#">Profile</a>
<div class="spacer"></div>
<input class="searchbar" type="text" placeholder="Search">
<div class="spacer"></div>
</div>uj5u.com熱心網友回復：
怎么用vertical-align:top;？
@import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@500&display=swap');
body {
margin: 0px;
}
.top-nav-bar {
background-color: #292929;
height: 55px;
text-align: center;
font-family: 'Open Sans', sans-serif;
color: #DDDDEB;
font-size: 50px;
}
.spacer {
margin: 5px;
display: inline;
cursor: help;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #597BEB;
}
.searchbar {
font-size: 16px;
border-width: 2px;
border-color: #CCCCCC;
background-color: inherit;
border-style: solid;
border-radius: 50px;
width: 150px;
height: 50px;
vertical-align:top;
}<div class="top-nav-bar">
<a href="#">Home</a>
<div class="spacer"></div>
<a href="#">Profile</a>
<div class="spacer"></div>
<input class="searchbar" type="text" placeholder="Search">
<div class="spacer"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/416458.html
標籤：