title: CSS: <li> items having 3 inline-block elements, last occupying max space
body: <p>In each list item in an unordered list I have 2 inline-block elements and an anchor text, all next to each other. So in each <code>&lt;li&gt;</code> there are 2 icons and a text.</p>
  <p>The reason I made those 2 icons <code>display:inline-block</code> is because they have different heights and the anchor text next to them can occasionally become multiple lines, and I'm able to center them to the first line by the <code>vertical-align</code> rule.</p>
  <p>Anyway this anchor tag has a <code>:hover</code> style, which is basically <code>background-color:gray</code>. For some reason I couldn't succeed in blocking this anchor element by any generic solution.</p>
  <p>What I did sort of works but I can't rely on this solution because I'm using hard-coded with for the <code>&lt;ul&gt;</code> and <code>&lt;a&gt;</code> widths and when the list needs scrollbars these widths need to be subtracted the bar width. Below is my current solution, if that sheds a light to someone.</p>
  <p>I tried giving the anchor text a margin-left and set it to <code>display:absolut</code>, to no avail. I also tried giving percentages but again… Ultimately I tried floating the elements but it's probably the wrongest solution here because of the multiline possibility of the text and centering each element in vertical center of the first line of the text. My next guess is using a table in each list item but that's probably the dirtiest solution available, and I don't want to use that unless I have to.</p>
  <p>How would you do it? Let me know if you need further details.</p>
  <h3>CSS</h3>
  <pre><code>ul {
      overflow:auto;
      height:6em;
      width:320px;
  }
  li .icon1 {
      display:inline-block;
      width:13px;
      height:12px;
      vertical-align:top;
      background:url(image.jpg) left top no-repeat;
  }
  li .icon2 {
      display:inline-block;
      width:9px;
      height:10px;
      margin-right:2px;
      background:url(image.jpg) left -12px no-repeat;
  }
  li a {
      display:inline-block;
      padding-left:4px;
      vertical-align:top;
      width:270px;
  }
  li a:hover {
      background-color:lightgray;
  }
  </code></pre>
  <h3>HTML</h3>
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;div class=&quot;icon1&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;icon2&quot;&gt;&lt;/div&gt;
          &lt;a href=&quot;#&quot;&gt;Some anchor text&lt;/a&gt;
      &lt;/li&gt;
      &lt;!-- many other li items in here --&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Here's an image to illustrate what I'm trying to achieve:</p>
  <p><img src="https://i.stack.imgur.com/ucSQt.jpg" alt="a pseudo image" /></p>
  <p>Thanks in advance.</p>