inline-block 内容表现为块答案

【问题标题】：inline-block content to behave as blockinline-block 内容表现为块
【发布时间】：2017-02-27 16:31:31
【问题描述】：

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

如何使 li 项中的第一个链接占用所有可能的空间？

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>

【问题讨论】：

你能把你的问题说清楚一点吗
你想要什么请清楚
@Paulie_D 它是如何从服务器打印出来的...
@MarkWilson 我需要整个“框”都可以点击
你想要这样吗？ Fiddle

标签： html css menu block badge

【解决方案1】：

使用后代选择器使链接显示块并且不定位徽章链接，我还通过添加底部：0; 将徽章向上移动到正确的行。

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

https://jsfiddle.net/6a7643h9/

【讨论】：

第一，我怎么能错过。第二

【解决方案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>

【讨论】：

【解决方案3】：

使用width: 100%;作为li内的链接

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

编辑：

JsFiddle Demo

【讨论】：

这会将 A 块推到其父级之外并导致底部滚动条出现
将宽度减小到 97% 或者你也可以使用 width: calc(100% - 20px);其中 20px 是左右填充值的两倍

【解决方案4】：

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

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

【讨论】：

你是 矫枉过正（任何帮助准确的词？）解决方案。
恕我直言，这太疯狂了
这有点矫枉过正，当然。也许它至少为如何做事提供了不同的视角。
我们不应该追求CSS可以轻松解决的事情
足够公平，适当注明