My nested list structure looks like this...
https://i.sstatic.net/sggVx.png
What you see is a recursive ul/li setup...
<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>
<...more list items...>
</ul>
</li>
<...more list items...>
</ul>
</span>
</div>
... Now with i) bullets removed and ii) each list item shifted to the left (as I thought the original indentation was excessive)...
.family ul {
list-style: none;
}
.family ul li {
position:relative;
left:-20px;
}
However, the issue with shifting list items left is that the text width does not extend to the right edge, causing premature wrapping.
By toggling the left: -20px; property, the difference becomes clear...
https://i.sstatic.net/uLRIY.gif
So, how can I fix the text width extension issue on the right side (highlighted in red)?
I am open to changing the current method of left-shifting list items, as long as the effect is retained.
I am also willing to use Bootstrap 4/flex classes if they can address this problem.