个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
https://jsfiddle.net/1xqfsbLr/
这是我正在处理的网站。不幸的是，我的表单导致导航栏中的所有其他元素垂直错位(向下移动 5 个像素)。有什么办法可以解决这个问题，同时保持表单的布局(表单内输入框的位置)相同？如果可能的话，我想将表格保留在下面的导航栏中。谢谢。
<nav>
<form action="search.php" method="post" id="Search">
<input type="search" class="searchbox" name="query" placeholder="Enter Your Search Term Here"/>
</form>
<div class="nav_element" id="BluRays"> </div>
<div class="nav_element" id="DVDs"> </div>
<div class="nav_element" id="Login"> </div>
<div class="nav_element" id="Register"> </div>
<div class="nav_element" id="My_Account"> </div>
</nav>
最佳答案
如果我理解正确，你只需要将 vertical-align:top 添加到你的 .nav_element 因为 inline-block 默认设置到基线
这是一个片段:
html,
body {
margin: 0;
padding: 0;
font-family: Sans-Serif;
}
.site_wrapper {
position: absolute;
margin: auto;
width: 1380px;
background-color: blue;
}
nav {
position: absolute;
left: 200px;
height: 40px;
width: 1180px;
display: inline-block;
text-align: center;
}
.logo {
top: 0;
left: 0;
display: inline-block;
height: 40px;
width: 200px;
background-image: url(logo.png);
}
.nav_element {
text-align: center;
height: 40px;
width: 140px;
background-color: white;
display: inline-block;
vertical-align:top;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.nav_element:hover {
cursor: pointer;
}
#Search {
width: 280px;
text-align: center;
height: 40px;
background-color: white;
display: inline-block;
text-align: center;
margin: 0;
}
.searchbox {
margin-top: 5px;
color: #c3c8c8;
height: 30px;
width: 200px;
text-align: left;
}
#DVDs {
background-image: url("/img/buttons/DVD.png");
}
#DVDs:hover {
background-image: url("/img/buttons/DVD_highlight.png");
}
#BluRays {
background-image: url("/img/buttons/BluRays.png");
}
#BluRays:hover {
background-image: url("/img/buttons/BluRays_highlight.png");
}
#BluRays {
background-image: url("/img/buttons/BluRay.png");
}
#BluRays:hover {
background-image: url("/img/buttons/BluRay_highlight.png");
}
#Login {
background-image: url("/img/buttons/Login.png");
}
#Login:hover {
background-image: url("/img/buttons/Login_highlight.png");
}
#Logout {
background-image: url("/img/buttons/Logout.png");
}
#Logout:hover {
background-image: url("/img/buttons/Logout_highlight.png");
}
#Register {
background-image: url("/img/buttons/Register.png");
}
#Register:hover {
background-image: url("/img/buttons/Register_highlight.png");
}
#My_Account {
background-image: url("/img/buttons/Account.png");
}
#My_Account:hover {
background-image: url("/img/buttons/Account_highlight.png");
}
aside {
height: 400px;
width: 200px;
background-color: #dfe0e1;
}
.basket {
position: absolute;
height: 800px;
right: 0;
background-color: orange;
}
footer {
position: absolute;
bottom: 0;
text-align: center;
font-weight: bold;
background-color: red;
height: 30px;
width: 100%;
}<body>
<div class="site_wrapper">
<div class="logo"> </div>
<nav>
<form action="search.php" method="post" id="Search">
<input type="search" class="searchbox" name="query" placeholder="Enter Your Search Term Here" />
</form>
<div class="nav_element" id="BluRays"> </div>
<div class="nav_element" id="DVDs"> </div>
<div class="nav_element" id="Login"> </div>
<div class="nav_element" id="Register"> </div>
<div class="nav_element" id="My_Account"> </div>
</nav>
</div>
</body>关于HTML & CSS : My form causes all other elements in it's parent container to become mis-aligned，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29745631/
26
4
0
这个问题在这里已经有了答案: Why don't Java's +=, -=, *=, /= compound assignment operators require casting? (11 个
我搜索了很多，但没有一个链接能帮助我解决这个问题。我得到了 ORA-21500: internal error code, arguments: [%s], [%s], [%s], [%s], [%s
我正在做 RegexOne 正则表达式教程，它有一个 question关于编写正则表达式以删除不必要的空格。 教程中提供的解决方案是 We can just skip all the starting
([\s\S]+|\s?) 中 |\s? 的目的或作用是什么？如果没有它，表达式会不会与 ([\s\S]+) 相同？ 最佳答案 这不是完全相同的。 ([\s\S]+|\s?) 会匹配空字符串，而 ([
这个正则表达式有一组还是两组？ 我正在尝试使用第二组访问 bookTitle 但出现错误: Pattern pattern = Pattern.compile("^\\s*(.*?)\\s+-\\s+
在 C 中给定一个字符串指针 s，下面的迭代会做什么？即它以什么方式遍历字符串？ for (++s ; *s; ++s); 最佳答案 for (++s ; *s;++s) 表示 将指针 s 递增到字符
我正在用一个 node.js 应用程序解析一个大列表并有这段代码 sizeCode = dbfr.CN_DESC.split('\s+-\s*|\s*-\s+') 这似乎不起作用，因为它返回了 [ '
我正在编写一个简单的字符串连接程序。 该程序按照我发布的方式运行。但是，我首先使用以下代码编写它来查找字符串的结尾: while (*s++) ; 但是，这个方法并没有奏效。我传递给它的字符串
这个问题已经有答案了: What does (?和aramchand来自Mohandas Karamchand G 因此，在使用这些匹配来分割字符串后，您最终会得到 {"M", "K", "G"} 注
我正在尝试转换 Map到 List使用 lambda。 本质上，我想将键和值与 '=' 连接起来之间。这看起来微不足道，但我找不到如何去做。 例如 Map map = new HashMap<>();
我正在经历 K & R，并且在递增指针时遇到困难。练习 5.3(第 107 页)要求您使用指针编写一个 strcat 函数。 在伪代码中，该函数执行以下操作: 将 2 个字符串作为输入。 找到字符串
在下面的代码中，pS 和 s.pS 在最后一行是否保证相等？也就是说，在语句S s = S();中，是否可以确定不会构造一个临时的S？ #include using namespace std; s
演示示例代码: public void ReverseString(char[] s) { for(int i = 0, j = s.Length-1; i < j; i++, j--){
我一直在寻找类似于 .NET examples 中的示例的 PowerShell 脚本.取一个 New-TimeSpan 并显示为 1 天 2 小时 3 分钟 4 秒。排除其零的地方，在需要的地方添加
def func(s): s = s + " is corrected" return s string_list = ["She", "He"] for s in string_li
我是 python 的新手。当我在互联网上搜索 lambda 时。我在 lambda_functions 中找到了这个声明. processFunc = collapse and (lambda s:
我最近开始学习正则表达式，并试图为上面的问题写一个正则表达式。如果限制只放在一个字母上(例如不超过 2 个“b”)，这并不困难。 那么答案就是:a* c*(b|ε)a* c*(b|ε)a* c* 但是
当我运行 npm install 时出现以下错误，但我无法修复它。 我试过:npm install -g windows-build-tools 也没有修复这个错误 ERR! configure
有很多有趣的haskell网上可以找到片段。 This post可以在 this (awesome) Stack Overflow question 下找到. The author写道: discou
我知道以下三行代码旨在将字符串提取到$ value中并将其存储在$ header中。但是我不知道$value =~ s/^\s+//;和$value =~ s/\s+$//;之间有什么区别。 $val
我是一名优秀的程序员,十分优秀！