встроенный -содержимое блока, чтобы вести себя как блок

ProgramBox

встроенный -содержимое блока, чтобы вести себя как блок

Post author:admin
Запись опубликована:20 марта, 2023
Post category:Вопросы по программированию

#html #css #menu #block #badge

#HTML #css #меню #блок #значок

Вопрос:

У меня есть эта настройка, и я хотел бы иметь возможность навести курсор на элемент 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>

1. Можете ли вы сделать свой вопрос немного более понятным

2. что вы хотите, плз ясно

3. @Paulie_D это то, как оно печатается с сервера…

4. @MarkWilson Мне нужно, чтобы весь «ящик» был доступен для просмотра

5. Вы хотите, чтобы это было так? Скрипка

Ответ №1:

Сделайте ссылки отображаемыми в блоке и не нацеливайте ссылки на значки, используя селектор потомков, и я также переместил значки вверх на правильную строку, добавив bottom: 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

1. это выталкивает блок A за пределы его родительского элемента и вызывает появление нижней полосы прокрутки

2. уменьшите ширину до 97%, или вы также можете использовать width: calc(100% — 20 пикселей); где 20 пикселей — это двойное значение заполнения для left-right

Ответ №4:

Вы могли бы использовать немного JavaScript, чтобы обернуть все это в div и предоставить ему событие onclick().

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

1. Вы перебиваете ( любая помощь с точным словом? ) решение.

2. при всем уважении, это просто безумие

3. Конечно, это перебор. Возможно, это, по крайней мере, предлагает другой взгляд на то, как все может быть сделано.

4. мы не должны настаивать на вещах, которые могут быть легко решены с помощью CSS

5. Достаточно справедливо, должным образом отмечено