我正在尝试使用导航栏创建表单答案

【问题标题】：I am trying to create a form with nav bar我正在尝试使用导航栏创建表单
【发布时间】：2020-07-29 05:31:55
【问题描述】：

我正在尝试用form

创建一个非常简单的导航栏

我对图像执行了float:right 规则，对导航栏（标题）执行了float:left; 规则

但它一起显示为内联，我希望标题填充所有标题（块）

这是输出图像：

这是代码：

    body{
        background-color: beige;
    }
    ul{
        font-style:italic;
        font-weight:bold; 
        color:darkkhaki; 
        float:right;
    }  
    .front{
        float:right; 
        filter:grayscale(65%) blur(0.2px);  
        height:200px;
        width:300px;
    } 
    header{ 
        float:left;
        background-color:black;
        display:table; 
    } 
    .container{
        margin: 0 auto;
    }

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<header>   
    <div class="container">
        <nav> <img class="front" src="/D:/CSS.JPG" >
            <ul>
                <li> <a href="">Count Me In </a> </li>
                <li> <a href="">Dont Count Me</a></li> 
            </ul>
        </nav> 
    </div>
</header>
</body>
</html>

【问题讨论】：

我添加了黑色的背景颜色，我希望它填充页面的所有顶部“栏”
你想让导航栏的图片在右边，链接在左边，背景颜色为黑色吗？
是的！右边的图片和左边的链接！但由于某种原因它粘在一起

标签： html css forms navigation tags

【解决方案1】：

希望这会有所帮助！.. 很高兴有您加入 StackOverflow.. 设计愉快！

body{
    background-color: beige;
}
ul{
    font-style:italic;
    font-weight:bold; 
    color:darkkhaki; 
}  
li{
    float:left;
    list-style:none;
    margin-right:5px;
}
li a{
    text-decoration:none;
}
.front{
    float: right; 
    filter:grayscale(65%) blur(0.2px);  
    height:35px;
    width:35px;
} 
header{ 
    float:left;
    background-color:black;
    width: 100%;
} 
.container{
    width: 100%;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<header>   
    <div class="container">
        <nav> <img class="front" src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/21_Angular_logo_logos-512.png">
            <ul>
                <li> <a href="">Count Me In </a> </li>
                <li> <a href="">Dont Count Me</a></li> 
            </ul>
        </nav> 
    </div>
</header>
</body>
</html>

【讨论】：