如何设置内联导航栏的样式，左侧是徽标和菜单链接，右侧是表单控件

问题描述 投票：3回答：2

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

screenshot for final styling

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;
}
html5 css3
2个回答
3
投票

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

您可以尝试播放应用一个项目float：right;，或使用容器{display：flex; } items {order：-1;}更多细节：display: flex;

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.