0

I have following code, generated from jQuery steps plugin:

<ul>
    <li>
        <a href="#">
            Step 1
        </a>
    </li>
    <li>
        <a href="#">
            Step 2
        </a>
    </li>
    <li>
        <a href="#">
            Step 3
        </a>
    </li>
</ul>

The css looks like this:

ul li {
    display: table-cell;
    position: relative;
    float: none;
    width: 1%;
}

ul li a {
    display: block;
    text-align: center;
    padding: 12px 18px;
    -webkit-user-drag: none;
    height:100%;
}

My problem is, that the output looks weird, when there's too much text for this list:

How can I fix that? I tried it without the table-cell but with inline-block formattings, but nothing worked properly. Is there an easy way? A workaround would be counting the letters and then make a padding-top, but for me that's nonsense because of the responsiveness of the site.

I tried it with (from 100% height on child of "display: table-cell"):

ul { display:table; }
ul li { display:table-cell; }
ul li a { display:block; height:100%; }

But that won't work too.

Community
  • 1
  • 1
Matt Backslash
  • 764
  • 1
  • 8
  • 20
  • Is the CSS also generated? – Jay Feb 22 '16 at 19:54
  • The relative height of the child element `ul li a` depends on the fixed height of the parent element, `ul li` which is currently not set. It is therefore dynamically set to the contents of the child. – J. Bush Feb 22 '16 at 20:56
  • @Jay the css is not generated, I could change the css in the plugin-template or overwrite with my own. – Matt Backslash Feb 23 '16 at 08:47
  • Yeah.. But __why__ are you using position relative for this? If you're creating a navbar, you could easily do so without the use of tables and cells which would fix your problem. – Jay Feb 23 '16 at 11:01

0 Answers0