时间戳

首页 > 解决方案 > 将列表放在图像旁边

html - 将列表放在图像旁边

问题描述

我正在学习 HTML，我正在设计我的第一个带有图片和导航栏的网页，所以我正在尝试遵循我的线框设计，我有点困惑，因为我想输入“登录并登录” logo/favicon 旁边的按钮，我只能用文本来做，你可以看到我使用了一个列表，因为这是我现在正在学习的内容 我还没有使用 java 脚本和按钮

所以我只是想知道它是否可能或有其他方法来组织它我希望你能帮助我:)

  1. 这是html代码

#top-bar {
    background-repeat: repeat-x;
    width: 100%;
    height: 15px;
}


.nav-bar   {
    background-color: #ffffff;
    height: 40px;
    width: 100%;
    border-bottom:4px solid #000000;
    
}

.nav-bar ul   {
    padding: 0px;
    margin: 0px;
    text-align:center;
}
.nav-bar li    {
    list-style-type: none;
    padding: 0px;
    height: 35px;
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline;
  
}
.nav-bar li a{
    color: #000000;
    background-color: none;
    font-size: 20px;
    font-family: Verdana;
    text-decoration: none;
    padding:4em 4em;
    line-height: 0.5em;
}

.header, img.img-fluid{
    display: block;
    margin-left: 27em;
    margin-right: 27em;
    margin-top: 0px;
    width: 220px; 
}

.header, h2.text{
    margin-top: 55px;
    font-size: 45px;
    font-family: Verdana;
    font-weight :bolder;
}
.headerh2{
    display: flex;
    align-items: center;
    flex-direction: row;
}

.ini-reg, li{
    color: #6E6E6E;
    overflow: hidden;
    display: inline;
}

.cont{
    list-style:none;
    margin: 0;
    padding: 0;
}

.item{
    float: right;
    display: block;
    color: f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
    font-family: Verdana;
    color: #000;
    font-weight: bolder;
    border: 1px solid black;
}

.ini-reg ul{
    list-style: none;
    position: relative;
    white-space:nowrap;
    display: inline;
}


.topnav,a.active{
    background-color: #6E6E6E
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title> Bo(ok) Spectator </title>
    <link rel="icon" type="image/png" sies="96x96" href="img/favicon def.png">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/icofont/icofont.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
    <body>
        <header id="header">
            <div id="top-bar"></div>
            <div class="nav-bar">
                <nav id="nav-cont" class="cf">
                <ul>
                    <li><a href="#" target="_blank">Géneros</a></li>
                    <li><a href="#" target="_blank">Aportes</a></li>
                    <li><a href="#" target="_blank">Inicio</a></li>
                    <li><a href="#" target="_blank">Contacto</a></li>
                    <li><a href="#" target="_blank">Preguntas</a></li>
                </ul>
            </nav>
            </div>
            <div class="container">
                <div>
                    <h2 class="text float-left">Bo(ok) Spectator</h2>
                    <img src="img/favicon def.png" class="img-fluid">
                    <nav class="ini-reg">
                        <ul class="cont">
                            <li><a href="#regi"  target="_blank" class="item" id="tag">Iniciar Sesión</a></li>
                            <li><a href="#inises" target="_blank" class="item">Registrarse</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <script src="js/bootstrap.bundle.min.js"></script>
    </body>
</html>

  1. 以及结果的图片

捕获

标签： htmlcss

解决方案

尝试不使用nav该类ul仅ul在图像下方使用并添加display:flex到ul

  <div class="container">
            <div>
                <h2 class="text float-left">Bo(ok) Spectator</h2>
                <img src="img/favicon def.png" class="img-fluid">
                    <ul class="cont">
                        <li><a href="#regi"  target="_blank" class="item" id="tag">Iniciar Sesión</a></li>
                        <li><a href="#inises" target="_blank" class="item">Registrarse</a></li>
                    </ul>
            </div>
        </div>

推荐阅读