为什么<a> tag doesn&#39;t fit to child image

Question

I've got a header like that:

<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>

With the 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;


}

The problem is that the "a" tag should fit to image size, but that's not true, because it stretches from the left to the middle of the page width, so some nav menu entries wrap to a new even in full screen.

Answer 1

试试这个css：

=CountCFCells(INDIRECT("A2:A" & NoR),README!$A$2)

Answer 2

目前还不完全清楚这应该如何看，但只是在父母身上设置display:flex不会自动告诉孩子如何表现。

我看到那里的宽度为20％，我认为这意味着徽标区域（而不是徽标图片）....所以收到flex:0 0 20%;

因此导航应flex:1占用剩余空间。

Codepen Demo

当然，您需要在某些时候进行媒体查询，以避免任何不必要的包装。

header {
  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;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #3498DB;
}
#logo {
  box-shadow: 0px 0px 5px #fff;
  border-radius: 50%;
}
#logourl {
  margin-top: 10px;
  margin-bottom: 15px;
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20%;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  text-align: center;
}
header nav {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  /*-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;
}

<header id="top">

  <a id="logourl" href="/">
    <img src="http://lorempixel.com/output/fashion-q-c-250-100-10.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>