我是 CSS 的新手，我正在创建一个在导航栏上带有登录部分的欢迎页面。我设法创建了整个页面的 div 部分，但是我需要有关对导航栏进行 CSS 编码的帮助。
我现在拥有的 CSS:
div.col-4
{
width:41%;
float:left;
background: #ffffff;
height: 100%;
}
div.col-6
{
width:58%;
float:right;
background: #ffffff;
height: 100%;
}
#topbar-hello{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background-color:#0084fd;
}
HTML:
<body>
<div id="topbar-hello">
<!-- This is where I need to add the login section -->
</div>
<div class="col-4">
</div>
<div class="col-6">
</div>
</body>
这是我现在拥有的:
我需要向导航栏添加一个登录区域(如下所示的 2 个文本框和跨度):
我很难理解如何使这两个文本框、3 个标签和复选框适合导航栏。
能否指出导航栏的CSS代码来实现上述登录区域？
最佳答案
只需在导航栏的 div 中编写代码即可。您可以在该登录表单样式中使用 table。
<div id="topbar-hello">
<table>
<tr>
<td>
Email
</td>
<td>
Password
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="password" />
</td>
<td>
<button>
Log In
</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" /> Remember me
</td>
<td>
Forgot Password
</td>
</tr>
</table>
<!-- This is where I need to add the login section -->
</div>
<div class="col-4">
</div>
<div class="col-6">
</div>
你可以在这里看到它，jsFiddle .
关于html - 在 HTML 页面的导航栏中设计一个简单的登录部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36198855/