行内块内容表现为块

Question

我有这个 setup，我希望能够将鼠标悬停在 LI 元素的顶部，并且由于里面有 link/s，所以它都可以点击。

如何让li项中的第一个link占据所有可能的space？

a,
a:hover {
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  border-left: 2px transparent solid;
  transition: background 0.10s linear;
  /* vendorless fallback */
  white-space: nowrap;
  position: relative;
  /* so the badge follow the item if scrolling */
}
li:first-child {
  margin-top: 1px;
  padding: 7px 10px;
  border-left: none;
  background: #E8E8E8;
  font-weight: bold;
  transition: background 0s linear;
  /* vendorless fallback */
}
li:first-child:hover {
  border-left: none;
  background: #E8E8E8;
  transition: background 0s linear;
  /* vendorless fallback */
}
li:hover {
  border-left: 2px #F27223 solid;
  background: white;
  transition: background 0s linear;
  /* vendorless fallback */
}
ul li a {
  padding: 7px 10px;
  display: inline-block;
}
ul li .badge {
  margin: 7px 10px;
  min-width: 30px;
  background: red;
  border-radius: 20px;
  text-align: center;
  right: 0;
  position: absolute;
}
ul li .badge a {
  padding: 0 4px;
  color: white;
  margin: 0;
}

<ul>
  <li>
    <span>Menu Header</span>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">4</a></span>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">3</a>
   </span>
  </li>
  <li>
    <a href="a">
      <span>Bank</span>
    </a>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">19</a></span>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">7</a></span>
  </li>
</ul>

Answer 1

width: 100%; 用于 li

中的 link

ul li a {
    padding: 7px 10px ;
    display: inline-block;
    width: calc(100% - 20px); /*20px = sum of left and right padding*/
}

编辑：

JsFiddle Demo

Answer 2

Flexbox 可以做到这一点。

 li {
   display: flex;
 }

 ul li a {
   flex:1;
 }

a,
a:hover {
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  border-left: 2px transparent solid;
  transition: background 0.10s linear;
  /* vendorless fallback */
  white-space: nowrap;
  position: relative;
  /* so the badge follow the item if scrolling */
  display: flex;
}
li:first-child {
  margin-top: 1px;
  padding: 7px 10px;
  border-left: none;
  background: #E8E8E8;
  font-weight: bold;
  transition: background 0s linear;
  /* vendorless fallback */
}
li:first-child:hover {
  border-left: none;
  background: #E8E8E8;
  transition: background 0s linear;
  /* vendorless fallback */
}
li:hover {
  border-left: 2px #F27223 solid;
  background: white;
  transition: background 0s linear;
  /* vendorless fallback */
}
ul li a {
  padding: 7px 10px;
  display: inline-block;
  fleX: 1;
}
ul li .badge {
  margin: 7px 10px;
  min-width: 30px;
  background: red;
  border-radius: 20px;
  text-align: center;
  right: 0;
  position: absolute;
}
ul li .badge a {
  padding: 0 4px;
  color: white;
  margin: 0;
}

<ul>
  <li>
    <span>Menu Header</span>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">4</a></span>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">3</a>
   </span>
  </li>
  <li>
    <a href="a">
      <span>Bank</span>
    </a>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">19</a></span>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
  </li>
  <li>
    <a href="a">
      <span>Menu Item</span>
    </a>
    <span class="badge"><a href="a">7</a></span>
  </li>
</ul>

Answer 3

您可以使用一些 JavaScript 将整个内容包装在 div 中，并为其提供一个 onclick() 事件。

http://www.w3schools.com/jsref/event_onclick.asp

Answer 4

使用后代选择器使链接显示块并且不以徽章链接为目标，我还通过添加 bottom: 0; 将徽章向上移动到正确的行上。

ul li > a {
   padding: 7px 10px;
   display: block;
}

https://jsfiddle.net/6a7643h9/

行内块内容表现为块

inline-block content to behave as block

html

css

menu

block

badge