gpt4 book ai didi

html - 搜索栏,html css。 (原子用户)

转载 作者:行者123 更新时间:2023-11-28 00:53:56 24 4
gpt4 key购买 nike

我一周前开始编码,我的 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com