我一周前开始编码，我的 css 和 html 几乎没有问题。我无法让搜索栏变小并调整到我的 Logo 旁边的顶部。我更改了“搜索”的字体大小，但它似乎不再出现了。我认为我的搜索栏可能太低了。这是我的床单，请有人帮忙。 我真的不知道，也许我忘记了几行代码。
/*essentials css */
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: #484848;
}
p{
font-size: 16px
margin: 0;
padding: 0;
}
a:link {
font-size: : 16px;
text-decoration: none;
}
a:visited{
text-decoration: none;
}
h1, h2, h3, h4, h5, h6, ul, ol, li {
margin: 0;
padding: 0;
}
ul, ol{
list-style-type;
}
::selection {
color: #fff;
background-color: #333;
}
::-moz-selection {
color: #fff;
background-color: : #333;
}
/* top- nap */
.top-nav {
position:fixed;
width:100%;
height: auto;
border-bottom: 1px solid #ccc;
}
.logo:link {
color: #484848;
display: inline-block;
transition: : all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition: all 0.3s ease;
border-right:1px solid #ccc;
}
.logo:visited{
color: #484848;
}
.logo:hover {
background-color: #f1f1f1;
}
.logo img {
position: relative;
padding: 12px 18px;
width: 100px;
border-right: : 1px solid #ccc;
vertical-align: : middle;
}
/* nav-search css */
#nav-search-wrapper {
display: inline-block;
width: 490px;
height: 100%;
}
#nav-search-wrapper form input {
padding: 22px 10px 18px 52px;
width: 100%;
border: none;
outline: none;
background-color: :red;
}
#nav-search-wrapper form input::-webkit-input-placeholder {
color: orange;
font-size:17px;
}
#nav-search-wrapper form input::-moz-placeholder {
color: orange;
}
#nav-search-wrapper form input:-ms-input-placeholder {
}
#nav-search-wrapper form input:-moz-placeholder {
color: orange;
}<!DOCTYPE html>
<html>
<head>
<title>ElephantRoom</title>
<meta charset="utf-8" />
<meta name"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<!-- Top-NAV HTML-->
<div class="top-nav">
<a href="index.html" class="logo">
<img src="logo.png" alt="ElephantRoom" />
</a>
<div id="nav-search-wrapper">
<form method="GET" action="index.html">
<input type="text"name="search" id="nav-search" placeholder="Search"/>
</form>
</div>
</div>
</body>
</html>最佳答案
如果我没理解错的话，您是想将搜索栏/文本移到更靠近 Logo 左侧的位置吗？
您应该调整搜索栏内的内边距，目前它被推到左边 52 像素:
#nav-search-wrapper form input {
padding: 22px 10px 18px 52px; // change padding
width: 100%;
border: none;
outline: none;
background-color: red;
}
类似于:
#nav-search-wrapper form input {
padding: 18px 10px;
width: 100%;
border: none;
outline: none;
background-color: red;
}
关于html - 搜索栏，html css。 (原子用户)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53075180/