Как расширить .li правый край после левого: -20px ;?

Question

У меня есть такой вложенный список ...

То, что вы видите, является рекурсивным пакетом ul / li ...

<div class="family d-block">
   <span class="pb-2"> <small class="text-muted">Family:</small><br>
   </span> 
   <span class="small">
      <span><img
         src="https://www.google.com/s2/favicons?domain=wpp.com" width="12"
         class="mr-2"><a
         href="http://www.example.com/organisation/wpp/">WPP</a></span>
      <ul>
         <li><img
            src="https://www.google.com/s2/favicons?domain=null" width="12"
            class="mr-2"><a
            href="http://www.example.com/organisation/wpp/24-7-realmedia/"
            title="View all products in 24/7 realmedia">24/7
            realmedia</a>
         </li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=akqa.com" width="12"
            class="mr-2"><a
            href="http://www.example.com/organisation/wpp/akqa/" title="View
            all products in akqa">akqa</a></li>
         <li>
            <img
               src="https://www.google.com/s2/favicons?domain=groupm.com"
               width="12" class="mr-2"><a
               href="http://www.example.com/organisation/wpp/groupm/" title="View
               all products in GroupM">GroupM</a>
            <ul>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=finecast.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/finecast/"
                  title="View all products in Finecast">Finecast</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=null" width="12"
                  class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/group-m-entertainment/"
                  title="View all products in group m entertainment">group m
                  entertainment</a>
               </li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=maxusbelgium.be"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/maxus/"
                  title="View all products in Maxus">Maxus</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=mec.ca" width="12"
                  class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/mec/"
                  title="View all products in MEC">MEC</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=wavemakerglobal.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/mec-global/"
                  title="View all products in mec global">mec global</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=mediacom.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/mediacom/"
                  title="View all products in MediaCom">MediaCom</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=mindshareworld.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/mindshare/"
                  title="View all products in Mindshare">Mindshare</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=null" width="12"
                  class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/modi-media/"
                  title="View all products in modi media">modi media</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=realmedia.group"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/real-media-group/"
                  title="View all products in real media group">real media
                  group</a>
               </li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=xaxis.com" width="12"
                  class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/xaxis/"
                  title="View all products in Xaxis">Xaxis</a></li>
            </ul>
         </li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=jwt.co.uk" width="12"
            class="mr-2"><a
            href="http://www.example.com/organisation/wpp/jwt/" title="View
            all products in JWT">JWT</a></li>
         <li>
            <img
               src="https://www.google.com/s2/favicons?domain=kantar.com"
               width="12" class="mr-2"><a
               href="http://www.example.com/organisation/wpp/kantar/" title="View
               all products in kantar">kantar</a>
            <ul>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=kantarmedia.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/kantar/kantar-media/"
                  title="View all products in kantar media">kantar
                  media</a>
               </li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=null" width="12"
                  class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/kantar/tns-media-intelligence/"
                  title="View all products in tns media intelligence">tns media
                  intelligence</a>
               </li>
            </ul>
         </li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=millwardbrown.com"
            width="12" class="mr-2"><a
            href="http://www.example.com/organisation/wpp/millward-brown/"
            title="View all products in Millward Brown">Millward
            Brown</a>
         </li>
         <li>
            <img
               src="https://www.google.com/s2/favicons?domain=ogilvy.com"
               width="12" class="mr-2"><a
               href="http://www.example.com/organisation/wpp/ogilvy/" title="View
               all products in ogilvy">ogilvy</a>
            <ul>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=ogilvyentertainment.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/ogilvy/ogilvy-entertainment/"
                  title="View all products in ogilvy entertainment">ogilvy
                  entertainment</a>
               </li>
            </ul>
         </li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=possible.com"
            width="12" class="mr-2"><a
            href="http://www.example.com/organisation/wpp/possible/"
            title="View all products in possible">possible</a></li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=vml.com" width="12"
            class="mr-2"><a
            href="http://www.example.com/organisation/wpp/vml/" title="View
            all products in VML">VML</a></li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=wavemakerglobal.com"
            width="12" class="mr-2"><a
            href="http://www.example.com/organisation/wpp/wavemaker/"
            title="View all products in Wavemaker">Wavemaker</a></li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=wunderman.com"
            width="12" class="mr-2"><a
            href="http://www.example.com/organisation/wpp/wunderman/"
            title="View all products in
            Wunderman">Wunderman</a></li>
      </ul>
   </span>
</div>

... С i) удаленными пулями и ii) каждый элемент списка установлен дальше влево (потому что я чувствовал, что было слишком много места с существующим отступом) ...

.family ul {
  list-style: none;
}
.family ul li {
  position:relative;
  left:-20px;
}

Проблема с настройкой элементов списка дальше слева, однако, заключается в том, что горизонтальное пространство для текста каждого элемента списка теперь не растягивается до самого правого края.Это приводит к преждевременному переносу текста.

Если я включу некоторые раскраски, вы увидите разницу при включении и выключении left: -20px; ...

Итак, как я могу восстановить способность текста элемента списка растягиваться до самого правого края (красного цвета)?

Я не против изменить базовый метод, с помощью которого у меня естьзаставил элементы списка начинать с более дальнего левого края, пока я могу сохранить эффект.

И я могу использовать любые классы Bootstrap 4 / flex, если они поддерживают это.

Answer 1

Что ж, если я правильно понимаю ваш вопрос, вы просто захотите изменить стратегию, как показано ниже (добавлено несколько визуальных граничных индикаторов).Также будет добавлено несколько минимальных атрибутов ARIA для людей, которые их ценят;

<nav role="navigation">
   <ul role="tree">
      <li role="treeitem">Parent</li>
      <li role="treeitem">Parent
         <ul role="tree">
            <li role="treeitem">Child</li>
            <li role="treeitem">Child</li>
         </ul>
      </li>
      <li role="treeitem">Parent</li>
   </ul>
</nav>

В любом случае, надеюсь, это поможет.Ура!

.family ul {
  list-style: none;
  border: red 1px dotted;
  margin: 0;
  padding: 0;
}

.family ul li {
  border: green 1px dotted;
  margin-left: 1rem;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="family d-block">
   <span class="pb-2"> <small class="text-muted">Family:</small><br>
   </span> 
   <span class="small">
      <span><img
         src="https://www.google.com/s2/favicons?domain=wpp.com" width="12"
         class="mr-2"><a
         href="http://www.example.com/organisation/wpp/">WPP</a></span>
      <ul>
         <li><img
            src="https://www.google.com/s2/favicons?domain=null" width="12"
            class="mr-2"><a
            href="http://www.example.com/organisation/wpp/24-7-realmedia/"
            title="View all products in 24/7 realmedia">24/7
            realmedia</a>
         </li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=akqa.com" width="12"
            class="mr-2"><a
            href="http://www.example.com/organisation/wpp/akqa/" title="View
            all products in akqa">akqa</a></li>
         <li>
            <img
               src="https://www.google.com/s2/favicons?domain=groupm.com"
               width="12" class="mr-2"><a
               href="http://www.example.com/organisation/wpp/groupm/" title="View
               all products in GroupM">GroupM</a>
            <ul>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=finecast.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/finecast/"
                  title="View all products in Finecast">Finecast</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=null" width="12"
                  class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/group-m-entertainment/"
                  title="View all products in group m entertainment">group m
                  entertainment</a>
               </li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=maxusbelgium.be"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/maxus/"
                  title="View all products in Maxus">Maxus</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=mec.ca" width="12"
                  class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/mec/"
                  title="View all products in MEC">MEC</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=wavemakerglobal.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/mec-global/"
                  title="View all products in mec global">mec global</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=mediacom.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/mediacom/"
                  title="View all products in MediaCom">MediaCom</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=mindshareworld.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/mindshare/"
                  title="View all products in Mindshare">Mindshare</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=null" width="12"
                  class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/modi-media/"
                  title="View all products in modi media">modi media</a></li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=realmedia.group"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/real-media-group/"
                  title="View all products in real media group">real media
                  group</a>
               </li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=xaxis.com" width="12"
                  class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/groupm/xaxis/"
                  title="View all products in Xaxis">Xaxis</a></li>
            </ul>
         </li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=jwt.co.uk" width="12"
            class="mr-2"><a
            href="http://www.example.com/organisation/wpp/jwt/" title="View
            all products in JWT">JWT</a></li>
         <li>
            <img
               src="https://www.google.com/s2/favicons?domain=kantar.com"
               width="12" class="mr-2"><a
               href="http://www.example.com/organisation/wpp/kantar/" title="View
               all products in kantar">kantar</a>
            <ul>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=kantarmedia.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/kantar/kantar-media/"
                  title="View all products in kantar media">kantar
                  media</a>
               </li>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=null" width="12"
                  class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/kantar/tns-media-intelligence/"
                  title="View all products in tns media intelligence">tns media
                  intelligence</a>
               </li>
            </ul>
         </li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=millwardbrown.com"
            width="12" class="mr-2"><a
            href="http://www.example.com/organisation/wpp/millward-brown/"
            title="View all products in Millward Brown">Millward
            Brown</a>
         </li>
         <li>
            <img
               src="https://www.google.com/s2/favicons?domain=ogilvy.com"
               width="12" class="mr-2"><a
               href="http://www.example.com/organisation/wpp/ogilvy/" title="View
               all products in ogilvy">ogilvy</a>
            <ul>
               <li><img
                  src="https://www.google.com/s2/favicons?domain=ogilvyentertainment.com"
                  width="12" class="mr-2"><a
                  href="http://www.example.com/organisation/wpp/ogilvy/ogilvy-entertainment/"
                  title="View all products in ogilvy entertainment">ogilvy
                  entertainment</a>
               </li>
            </ul>
         </li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=possible.com"
            width="12" class="mr-2"><a
            href="http://www.example.com/organisation/wpp/possible/"
            title="View all products in possible">possible</a></li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=vml.com" width="12"
            class="mr-2"><a
            href="http://www.example.com/organisation/wpp/vml/" title="View
            all products in VML">VML</a></li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=wavemakerglobal.com"
            width="12" class="mr-2"><a
            href="http://www.example.com/organisation/wpp/wavemaker/"
            title="View all products in Wavemaker">Wavemaker</a></li>
         <li><img
            src="https://www.google.com/s2/favicons?domain=wunderman.com"
            width="12" class="mr-2"><a
            href="http://www.example.com/organisation/wpp/wunderman/"
            title="View all products in
            Wunderman">Wunderman</a></li>
      </ul>
   </span>
</div>