Inline list items

  • I’m trying to display an unordered list horizontally on three pages in my website and I’m finding it difficult to override the CSS. I used Artisteer to create the theme and it doesn’t have the facility to tell lists to display themselves inline.

    So, I went into the style sheet through the WordPress themes editor and added in a custom block of code naming a custom id and setting the display selector to inline.

    The code looks like this:

    —————————
    #ulbookmenu ul li a {

    list-style-type:none;
    margin:0;
    padding:0;
    display:inline;
    }
    —————————

    This block of code is down at the bottom of the stylesheet where custom code is normally placed. The expected result is for a list of links to display horizontally. However, the actual result shows them displaying vertically.

    When I run inspect element on the page the underlying html and css shows the default id code from Artisteer as my custom code fails to overwrite it.

    The page can be viewed at https://www.susancreek.com/about-touched-by-the-dragons-breath/ – look at the links on the left side under the H1 header.

    I’m tempted to do without using a ul list and see if that works better.

    Sincerely,

    Broadlighter

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You need to talk to Artisteer’s forums about this.

    your style targets the link html tag;
    try to target the list element tag:

    #ulbookmenu ul li { ... }

    or the unordered list tag:

    #ulbookmenu ul { ... }

    you can try and use a browser inspection tool to find out if you are targetting the right selector.

    as this is a pure formatting issue and not a WordPress problem, consider asking in a CSS forum like https://csscreator.com/forum

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Inline list items’ is closed to new replies.