title: how to create an alphabet letter selector that spans an entire div width
body: <p>I am creating a website and need to filter contacts by letter.</p>
  
  <p>i will be using a horizontal bar containing each letter in the alphabet</p>
  
  <p><img src="https://i.stack.imgur.com/DrqaX.png" alt="enter image description here"></p>
  
  <p>I am currently using a ul and li with the inline function to display the images with a border right to create the letter divisions.</p>
  
  <p>My issue is that when changing zoom in the browser from 100% to any other value the letters change size and therefore throw out the centering of the div, sometimes even going down to the next line.</p>
  
  <p><img src="https://i.stack.imgur.com/ARO7l.png" alt="enter image description here"></p>
  
  <p>How do i create a list of letters that will be tight on the containing div and not be broken when resolution and zoom change</p>
  
  <p>SITE CODE:</p>
  
  <pre><code>&lt;ul class="alphabet"&gt;
                          &lt;li&gt;A&lt;/li&gt;
                          &lt;li&gt;B&lt;/li&gt;
                          &lt;li&gt;C&lt;/li&gt;
                          &lt;li&gt;D&lt;/li&gt;
                          &lt;li&gt;E&lt;/li&gt;
                          &lt;li&gt;F&lt;/li&gt;
                          &lt;li&gt;G&lt;/li&gt;
                          &lt;li&gt;H&lt;/li&gt;
                          &lt;li&gt;I&lt;/li&gt;
                          &lt;li&gt;J&lt;/li&gt;
                          &lt;li&gt;K&lt;/li&gt;
                          &lt;li&gt;L&lt;/li&gt;
                          &lt;li&gt;M&lt;/li&gt;
                          &lt;li&gt;N&lt;/li&gt;
                          &lt;li&gt;O&lt;/li&gt;
                          &lt;li&gt;P&lt;/li&gt;
                          &lt;li&gt;Q&lt;/li&gt;
                          &lt;li&gt;R&lt;/li&gt;
                          &lt;li&gt;S&lt;/li&gt;
                          &lt;li&gt;T&lt;/li&gt;
                          &lt;li&gt;U&lt;/li&gt;
                          &lt;li&gt;V&lt;/li&gt;
                          &lt;li&gt;W&lt;/li&gt;
                          &lt;li&gt;X&lt;/li&gt;
                          &lt;li&gt;Y&lt;/li&gt;
                          &lt;li&gt;Z&lt;/li&gt;
                      &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.alphabet {
                  float: left;
                  list-style-type: none;
                  margin-top:90px;
                  padding:0px;
                  cursor: pointer;
                  width: 100%;
  
                  li {
                      padding:0px;
                      border-right:1px solid @darkgrey;
                      font-size: 13px;
                      text-align: center;
                      padding-left: 3px;
                      padding-right: 3px;
                      color:black;
                      display:inline;
                  }
  
                  li:last-child {
                      border:none;
                      padding-right: 0px;
                  }
  
                  li:hover {
                      color:@green;
                      background-color: @lightgrey;
                  }
              }
  </code></pre>