Databases
StackOverflow2013
Postsdbo
POCSS List Styling Not Lining Up
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS List Styling Not Lining Up
    text
    copied!<p>Trying to get these list headings to line up correctly, but I can't figure out the justification to get it to line up. Trying to style it like the second one but those bold tags are pushing it down a line.</p> <p><img src="https://i.stack.imgur.com/YwRd9.png" alt="enter image description here"> <img src="https://i.stack.imgur.com/3B2cp.png" alt="enter image description here"></p> <pre><code> &lt;div class="block"&gt; &lt;ul class="toc partThree"&gt; &lt;li&gt;&lt;b&gt;39:&lt;/b&gt;&lt;a href="#"&gt;Maintaining This Diet&lt;/a&gt;&lt;/li&gt; &lt;br/&gt; &lt;li&gt;&lt;b class="parts"&gt;Part 3A:&lt;/b&gt;&lt;a class="partslink" href="#"&gt; About Fruit Consumption&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;40:&lt;/b&gt;&lt;a href="#"&gt;Ideal Fruit-combinations&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;41:&lt;/b&gt;&lt;a href="#"&gt;Fruits To Go&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;42:&lt;/b&gt;&lt;a href="#"&gt;Salads &amp;amp; Shakes&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;43:&lt;/b&gt;&lt;a href="#"&gt;Fruits In General&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;44:&lt;/b&gt;&lt;a href="#"&gt;About Consuming Nuts&lt;/a&gt;&lt;/li&gt; &lt;br/&gt; &lt;li&gt;&lt;b class="parts"&gt;Part 3B:&lt;/b&gt;&lt;a class="partslink" href="#"&gt; About Consuming Animal Food&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;45:&lt;/b&gt;&lt;a href="#"&gt;About Fresh Raw Fish&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;46:&lt;/b&gt;&lt;a href="#"&gt;About Fresh Raw Egg Yolk&lt;/a&gt;&lt;/li&gt; &lt;br/&gt; &lt;li&gt;&lt;b class="parts"&gt;Part 3C:&lt;/b&gt;&lt;a class="partslink" href="#"&gt; The Most Important Section of This book&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;47:&lt;/b&gt;&lt;a href="#"&gt;Remember That...&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;48:&lt;/b&gt;&lt;a href="#"&gt;The Rules&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;49:&lt;/b&gt;&lt;a href="#"&gt;The Obstacles&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;50:&lt;/b&gt;&lt;a href="#"&gt;Cravings&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;51:&lt;/b&gt;&lt;a href="#"&gt;Traps&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;52:&lt;/b&gt;&lt;a href="#"&gt;How To Pick Munch-foods&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;53:&lt;/b&gt;&lt;a href="#"&gt;Protein Contents&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;54:&lt;/b&gt;&lt;a href="#"&gt;Single Munch-food Items&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;55:&lt;/b&gt;&lt;a href="#"&gt;Munch-food Meals&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Here is the CSS:</p> <pre><code> .toc{ list-style:none; font-size: 15px; } .toc li{ margin:0 0 0 10px; width: 220px; overflow:hidden; font-size:13px; font-family:Arial; } .toc b{ float:left; padding: 0 4px 0 0; font-weight:bold; } .toc a{ float:left; width:191px; padding:0 0 0 0px; color: black; text-decoration:none; } .toc a:hover{ color: rgba(0,0,0,.8); text-decoration: underline; } b.parts{ } a.partslink{ } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload