Home » Wordpress » Li width not working

Li width not working

Posted by: admin February 26, 2018 Leave a comment

Questions:

Trying to show words inside wordpress menu item in column, by limiting its width. Can’t make it work.
I tried “width:”, i tried “max-width:”, added “!important”. I tried putting it into li, and i tried putting it into li a. Nothing works.

live link here
http://soloveich.com/pr2-2/

html code

<div id="mainpage2">
<ul>
    <li>
    <?php wp_nav_menu( array( 'theme_location' => 'main-menu'  ) ); ?>
</ul>
</li>
</div>

and css

#mainpage2 ul {
    list-style: none;
}

#mainpage2 ul li {
    display: inline;
}

#mainpage2 ul li a {
    max-width: 200px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    font-family: verdana;
    color: #fff;
}
Answers:

When you put the LI to ‘display: inline’, it does not take a width. To give an inline element a width, use display: inline-block, or make it a block element using display: block.

Questions:
Answers:

Using

display: inline-block;

In combination with proper structure:

<div id="mainpage2"> 
    <ul>
        <li>
            <?php wp_nav_menu( array( 'theme_location' => 'main-menu'  ) ); ?> 
        </li>
    </ul>
</div>

Notice that the <li> element must start and end within the <ul>.

Questions:
Answers:

display:inline will remove width considerations.

Try

display: inline-block;