The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Horizontal list items

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #168023

    Your text to link here…

    There’s 3 orange text links below the slideshow. This is an unordered list coming from a widget. They need to be layed out horizontally. In Firefox it looks good, but in Safaris and Chrome they are stacked like a typical ul.

    How can I fix the CSS properly so these links are horizontal?


    Looks fine to me in Chrome


    Ooops…sorry. Was looking at the wrong thing.

    Hold on. BRB.


    Ok…I think you would need to add display:inline-block to the li in that particular widget.

    .recent-category_widget  li {

    It’s difficult to work just in the Inspect Element tool so this might not be exact.

    Additional styling might be necessary to get them centered or whatever.

    .recent-category_widget {
    display: inline; / * Not sure if this is required but it's already in there */
    float: left;
    margin-bottom: 16px;
    margin-right: 30px;
        width:100% /* not sure about this, it might be needed */
    text-align: center; /* this */

    As for the ‘Our Commitment’ thing…the text isn’t centered if that’s what you are after.

    .widget h4.widgettitle {
    text-align: center; /* needs this */

    Do you use a reset.css or Normalize.css?

    You really should if you don’t.

    As for the spacing on the arrows it looks like you are using a bg image. You can always adjust that if you need.


    Can you use normalize on a WP child theme like this?

    That I don’t know…I would have thought so but there might be some cascade issues which might cause the overall theme to ‘break’

    Frankly, any base theme that doesn’t include a reset of some kind or Normalize.css seems a bad idea to me if you need the page to look exactly the same in all browsers.

    It doesn’t of course, the vast majority of users will only have / use one browser. It’s only use developers /designers who have multiple browsers installed.

    Do you see anything when you inspect that I can do to improve the CSS?

    Without inspecting the whole file, not really…have you run it through a validator &/or a CSSLint type app?

    Probably worthwhile.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.