我有一个用 html5 编写的代码，其中有一个 Logo 和一些导航链接。还有带有两个文本字段和 3 个按钮的登录表单。我想以这样一种方式设置样式，即我的 Logo 和导航栏链接并排 float 到左侧，而我的登录表单和按钮在右侧。我想要下图所示的确切样式
HTML代码是:
<body>
<header>
<nav class="nav-header-main">
<a class="header-logo" href="index.php">
<img src="img/logo.png" alt="mmtuts logo">
</a>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="header-login">
<form action="includes/login.inc.php" method="post">
<input type="text" name="mailuid" placeholder="Username/E-mail...">
<input type="password" name="pwd" placeholder="Password...">
<button type="submit" name="login-submit">Login</button>
</form>
<a href="signup.php">Signup</a>
<form action="includes/logout.inc.php" method="post">
<button type="submit" name="logout-submit">Logout</button>
</form>
</div>
</nav>
</header>
CSS 文件:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #d3d3d3;
height: 100vh;
width: 100%;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
display: inline;
background-color: #fff;
}
.header-logo img {
height: 40px;
margin-top: 10px;
}
最佳答案
检查这个 fiddle https://jsfiddle.net/nak73406/frpu62Lq/3/
您可以使用 float 来改变元素的方向。注意 CSS 中的最后几行
或者使用这段代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #d3d3d3;
height: 100vh;
width: 100%;
}
header {
position: fixed;
padding-top: 15px;
left: 0;
right: 0;
display: inline;
background-color: #fff;
}
nav ul{
list-style: none;
}
nav li a{
text-decoration: none;
color: gray;
text-transform: uppercase;
}
nav li{
float: left;
padding: 5px;
}
.header-logo img {
height: 40px;
margin-top: 10px;
float: left;
margin-right: 5px;
}
.logout {
float: right;
padding: 6px;
}
.loginform{
float: left;
}
.header-login{
float: right;
}
button[name="login-submit"],button[name="logout-submit"]{
background: black;
color: white;
border-radius: 5px;
padding: 5px;
border:none;
}
button[name="signup-submit"]{
background: white;
color: white;
border-radius: 5px;
padding: 5px;
border:none;
}
button[name="signup-submit"] a{
text-decoration: none;
}
input{
border-radius: 5px;
padding: 10px !important;
}<body>
<header>
<nav class="nav-header-main">
<a class="header-logo" href="index.php">
<img src="img/logo.png" alt="mmtuts logo">
</a>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="header-login">
<form class="loginform" action="includes/login.inc.php" method="post">
<input type="text" name="mailuid" placeholder="Username/E-mail...">
<input type="password" name="pwd" placeholder="Password...">
<button type="submit" name="login-submit">Login</button>
<button type="submit" name="login-submit"><a href="signup.php">Signup</a></button>
</form>
<form class="logout" action="includes/logout.inc.php" method="post">
<button type="submit" name="logout-submit">Logout</button>
</form>
</div>
</nav>
</header>
</body>关于html - 如何使用左侧的 Logo 和菜单链接以及右侧的表单控件来设置内联导航栏的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55311794/