html - 为什么 标签不适合子图像

Question

我有一个这样的标题:

<header id="top">

        <a id="logourl" href="/"><img src="/images/logo.jpg" alt="LOGO" id="logo"></a>
        <nav>
            <ul>
                <li id="firstli"><a href="<?php bloginfo('url') ?>">Home</a></li>
                <li><a href="<?php bloginfo('url') ?>/machines">Macchine</a></li>
                <li><a href="<?php bloginfo('url') ?>/resellers">Rivenditori</a></li>
                <li><a href="<?php bloginfo('url') ?>/where">Dove siamo</a></li>
                <li><a href="<?php bloginfo('url') ?>/contact">Contatti</a></li>
            </ul>
        </nav>
    </header>

使用 CSS:

header{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
     align-items: center;
    width:100%;

    background-color: #3498DB;

}



#logo{

    box-shadow: 0px 0px 5px #fff;
    border-radius: 50%;
    width: 20%;
}

#logourl{
    margin-top: 10px;
    margin-bottom: 15px;
    display: block;


}

header nav {
    width: auto;
    /*-webkit-align-self: flex-end;
        -ms-flex-item-align: end;
    align-self: flex-end;*/
    margin-bottom: 20px;

}
header nav ul{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
     -ms-flex-direction: row;
    flex-direction: row;
    /*justify-content: space-between;*/
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    list-style: none;
    text-align: center;
}


header nav li {

    text-align: center;
    padding: 5px 10px;
    /*border-right: 2px solid white;*/
    /*border-radius: 10px;*/
    /*margin-right: 10px;*/
    color: white;
    margin-left: 20px;

}header nav li>a {
    margin:0;
    width: 100%;
    height: 100%;
    color: #F2F1EF;
    font-weight: bolder;
        text-transform: uppercase;
    font-size: 25px;
    }

header nav li>a:hover{
    color: white;


}

问题是“a”标签应该适合图像大小，但事实并非如此，因为它从页面宽度的左侧延伸到中间，所以一些导航菜单条目即使在全屏时也会换行.

Answer 1

试试这个 CSS:

#logourl{
  overflow:hidden;
}