Question

我有一个用html5编写的代码，其中有一个徽标，一些导航链接。也有带有两个文本字段和3个按钮的登录表单。我想以一种方式设置样式，使我的徽标和导航栏链接并排浮动到左侧，而我的登录表单带有右侧的按钮。我想要下图所示的确切样式

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;
}

Answer 1

检查这个小提琴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>

Answer 2

您可以尝试将以下一项应用到float：right;或使用container {display：flex; }个项目{顺序：-1;} 更多详细信息：display: flex;

如何使用左侧的徽标和菜单链接以及右侧的表单控件来样式化内置导航栏

2 个答案: