Как оформить встроенную панель навигации логотипом и ссылками на меню слева и элементами управления формой справа

ProgramBox

Как оформить встроенную панель навигации логотипом и ссылками на меню слева и элементами управления формой справа

Post author:admin
Запись опубликована:8 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

У меня есть код, написанный на 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;
}

Ответ №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>

1. здесь окно маленькое, пожалуйста, проверьте на скрипке или в вашем локальном формате во всю ширину

2. да sir…it сработало, но как мне оформить метку регистрации между двумя кнопками.. я хочу, чтобы она располагалась точно так, как показано на изображении выше, которое я загружаю

3. Я обновлю это для вас, я просто хочу знать, что вы продолжаете свой вопрос

4. @NishantNarola Я обновил скрипт и коды, чтобы они лучше соответствовали вашему коду, но учтите, что для получения подробной информации вам следует написать код самостоятельно, также я рекомендую использовать в вашем проекте bootstrap, который упрощает вашу работу и имеет много хороших стилей для интерфейса. getbootstrap.com

5. <?php требует «header.php «; ?> <главная> <p>Вы вышли из системы! </p> <p>Вы вошли в систему! </p> </main> <?php требует «footer.php «; ?>

Ответ №2:

Вы можете попробовать воспроизвести применить один элемент с плавающей точкой: вправо;, или использовать container{ display: flex; } items{order: -1;} подробнее:display: flex;