小贝子编程

如何垂直对齐包装在列表元素中的div



我正在处理一个响应式折叠菜单，我希望将菜单项居中，日志左对齐，搜索框右对齐。

我主要按照自己的意愿进行设置，但要显示带有图标的搜索框，需要将其封装在div中。我无法在菜单项列表中定位搜索div，也无法使其垂直居中。

我正在使用Bulma CSS框架，并尝试了各种定位类，但都不起作用。

这是我迄今为止的尝试：

body {
font-family: Helvetica, Arial, sans-serif;
background-color: rgb(236, 236, 236);
margin: 0em;
color: rgb(19, 51, 61);
}
p {
font-size: 18px;
line-height: 1.5;
font-weight: bold;
color: rgb(51, 51, 51);
max-width: 55em;
}
p a {
color: rgb(41, 183, 206);
text-decoration: none;
}
strong {
color: rgb(41, 183, 206);
}
nav {
font-size: 12px;
background-color: rgb(19, 51, 61);
box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
padding: 0 1em;
height: 44px;
overflow: hidden;
text-align: center;
}
nav img {
text-align: left;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
max-height: 88px;
position: relative;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 0 1em;
color: rgb(236, 236, 236);
font-weight: 700;
letter-spacing: 0.1em;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
line-height: 44px;
height: 44px;
}
nav a:hover {
background-color: rgba(255, 255, 255, 0.08);
}
nav li:last-child { 
position: absolute; 
right: 0;
bottom: 44px; 
background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);
padding-left: 3em;
}
nav li:nth-last-child(2) { 
display: none;
}
nav#menu:target {
height: auto;
padding: 0;
}
nav#menu:target ul {
max-height: none;
}
nav#menu:target li {
display: block;
}
nav#menu:target a {
display: block;
padding: 0 2em;
background-color: rgba(255, 255, 255, 0.05);
}
nav#menu:target a:hover {
background-color: rgba(255, 255, 255, 0.08);
}
nav#menu:target li:not(:first-child) {
margin-top: 2px;
}
nav#menu:target li:last-child {
display: none;
}
nav#menu:target li:nth-last-child(2) {
display: inline-block;
position: absolute;
top: 0;
right: 0;
margin: 0;
border-left: 2px solid rgb(19, 51, 61);
}

.search-bg {
height: 50%;
background-color: transparent;
}
.sb-example-1 .search {
width: 100%;
position: relative;
display: flex;
}
.sb-example-1 .searchTerm {
width: 100%;
border: 2px solid rgba(243,241,224,1);
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.sb-example-1 .searchTerm:focus{
color: #00B4CC;
}
.sb-example-1 .searchButton {
width: 40px;
height: 40px;
border: 1px solid rgba(243,241,224,1);
background: rgba(243,241,224,1);
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.sb-example-1 .searchButton i{
color: black;
}
.searchandsocial {
vertical-align: top;
position: absolute;
right: 0;
}

.logo {    
max-height: 34px;
position: absolute;
left: 0;
}
.logosize {
max-height: 60px !important;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<nav id="menu">
<ul id="menu-closed">
<li class="logo"><a href="#"><img src="https://camo.githubusercontent.com/971caf673b2a29c7b6d6af6c74b9d7e649214eb1765bfef0848b68d3ce3a40fb/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f766974656a732e737667" style="max-height: 44px;" alt="" /></a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li>
<div class="sb-example-1 searchandsocial">
<div class="search">
<input type="text" class="searchTerm" placeholder="Search">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</li>
<li><a href="#menu-closed">&#215; Close menu</a></li>
<li><a href="#menu">&#9776; Menu</a></li>
</ul>
</nav>
</body>
</html>

这里的正确方法是什么？

此外，如何防止搜索框与其他列表元素重叠？

将top:2px应用于.searchandsocial:

body {
font-family: Helvetica, Arial, sans-serif;
background-color: rgb(236, 236, 236);
margin: 0em;
color: rgb(19, 51, 61);
}
p {
font-size: 18px;
line-height: 1.5;
font-weight: bold;
color: rgb(51, 51, 51);
max-width: 55em;
}
p a {
color: rgb(41, 183, 206);
text-decoration: none;
}
strong {
color: rgb(41, 183, 206);
}
nav {
font-size: 12px;
background-color: rgb(19, 51, 61);
box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
padding: 0 1em;
height: 44px;
overflow: hidden;
text-align: center;
}
nav img {
text-align: left;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
max-height: 88px;
position: relative;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 0 1em;
color: rgb(236, 236, 236);
font-weight: 700;
letter-spacing: 0.1em;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
line-height: 44px;
height: 44px;
}
nav a:hover {
background-color: rgba(255, 255, 255, 0.08);
}
nav li:last-child { 
position: absolute; 
right: 0;
bottom: 44px; 
background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);
padding-left: 3em;
}
nav li:nth-last-child(2) { 
display: none;
}
nav#menu:target {
height: auto;
padding: 0;
}
nav#menu:target ul {
max-height: none;
}
nav#menu:target li {
display: block;
}
nav#menu:target a {
display: block;
padding: 0 2em;
background-color: rgba(255, 255, 255, 0.05);
}
nav#menu:target a:hover {
background-color: rgba(255, 255, 255, 0.08);
}
nav#menu:target li:not(:first-child) {
margin-top: 2px;
}
nav#menu:target li:last-child {
display: none;
}
nav#menu:target li:nth-last-child(2) {
display: inline-block;
position: absolute;
top: 0;
right: 0;
margin: 0;
border-left: 2px solid rgb(19, 51, 61);
}

.search-bg {
height: 50%;
background-color: transparent;
}
.sb-example-1 .search {
width: 100%;
position: relative;
display: flex;
}
.sb-example-1 .searchTerm {
width: 100%;
border: 2px solid rgba(243,241,224,1);
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.sb-example-1 .searchTerm:focus{
color: #00B4CC;
}
.sb-example-1 .searchButton {
width: 40px;
height: 40px;
border: 1px solid rgba(243,241,224,1);
background: rgba(243,241,224,1);
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.sb-example-1 .searchButton i{
color: black;
}
.searchandsocial {
vertical-align: top;
position: absolute;
right: 0;
top:2px;
}

.logo {    
max-height: 34px;
position: absolute;
left: 0;
}
.logosize {
max-height: 60px !important;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<nav id="menu">
<ul id="menu-closed">
<li class="logo"><a href="#"><img src="https://camo.githubusercontent.com/971caf673b2a29c7b6d6af6c74b9d7e649214eb1765bfef0848b68d3ce3a40fb/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f766974656a732e737667" style="max-height: 44px;" alt="" /></a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li>
<div class="sb-example-1 searchandsocial">
<div class="search">
<input type="text" class="searchTerm" placeholder="Search">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</li>
<li><a href="#menu-closed">&#215; Close menu</a></li>
<li><a href="#menu">&#9776; Menu</a></li>
</ul>
</nav>
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium