我有这样的嵌套列表...
您看到的是一个递归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类。
最佳答案
好吧，如果我正确地理解了您的问题，您将只想更改如下策略（添加了一些可视边界指示器）。
还将为欣赏它们的人们添加一些极小的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>关于html - 如何加宽.li左后右边缘:-20px ;？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54517471/