Question

好吧，我正在学习如何使用CSS进行设计，并且我的CSS编码遇到了麻烦。我想在右下角插入和图像（徽标）和导航菜单。

这就是我所做的：

HTML：

    <header>
        <img src="imagenes/origen.png">
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li>/</li>
                <li><a href="#">Tienda</a></li>
                <li>/</li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
        <div class = "limpiar"></div>
    </header>

CSS：

    html {
    background-color: #ffffff;
}

body {
    background-color: yellow;
    margin: 1% 16%;
}

.limpiar {
    clear: both;
}

body img {
    width: 100%
}

body header {
    background-color: red;
    width: 100%;
}

body header img {
    width: 20%;
    float: left;
}

body header nav {
    width: 80%;
    float: left;
}

a{
    text-decoration: none;
    color: black;
    font-family: Arial;
}

li{
    margin-right: 3%;
    list-style: none;
    float: left;
}

但是我不能得到纵向和横向的联合部分！谢谢你的回复。

Answer 1

试试这个。我删除了浮动浮动“li”元素。并在“nav”元素上添加了“text-align：right”。将建议减少浮子的使用。我希望这有帮助

chain

html {
    background-color: #ffffff;
}

body {
    background-color: yellow;
    margin: 1% 16%;
}

.limpiar {
    clear: both;
}

body img {
    width: 100%
}
body header  {
    background-color: red;
    padding-top: 20px;
}

body header > div {
    background-color:#fff;
    width: 100%;
    display: flex;
    align-items: flex-end; 
}

body header img {
    width: 20%;
    flex-grow: 1;
}

body header nav {
  width: 80%;
  text-align: right;
}

a{
    text-decoration: none;
    color: black;
    font-family: Arial;
}
ul {
  margin: 0;
  padding: 0;
}
li{
    margin-right: 3%;
    list-style: none;
    display: inline-block;
}

垂直居中显示图像旁边的导航菜单（CSS）

1 个答案: