内联块内容表现为块

Question

我有这个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>

Answer 1

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

中的链接

from dask.distributed import Client
client = Client()

df = dask.dataframe.read_csv(...)
df.to_parquet(...)

编辑：

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

使链接显示块并且不使用后代选择器定位徽章链接，并且还通过添加底部：0 ;.

将徽章向上移动到正确的行上。

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

https://jsfiddle.net/6a7643h9/

Answer 4

您可以使用一些JavaScript将整个事物包装在div中，并给它一个onclick（）事件。

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