Links one one line with spaces

  • Hi all,

    I am running Word Press 5.0.3 with a Twenty Sixteen child theme. In the bottom widget I want to put all the links next to each other on the same line. This is my current custom html code.

    <a href="https://castleimages.com.au/the-fine-print/">Terms and Conditions</a>
<p><a href="https://castleimages.com.au/copyright-notice/">Copyright Notice</a></p>
<a href="https://castleimages.com.au/privacy-policy/">Privacy Policy</a>

    Also, for the borders I have put the following code in the customise / additional css section.

    .widget {
    border-style: solid;
    border-width: thin;
    border-color: white;
    padding: 2em;
    }

    How do I get the links centred and spaced?

    Regards,

    Steve

    • This topic was modified 5 years, 10 months ago by SteveFromAus.
    • This topic was modified 5 years, 10 months ago by SteveFromAus.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • lisa

    (@contentiskey)

    I think you are asking about creating a horizontal list
    something like this:
    https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal

    Thread Starter SteveFromAus

    (@stevefromaus)

    Thanks,

    Yes, something like that, although this solution looks a little overly complicated.

    However, I put that code in the custom html section for the widget, added &emsp for spacing but the hyperlink underline extends over the space. How do I stop that?

    Regards,

    Steve

    lisa

    (@contentiskey)

    please post the html that you are using that is causing the extended underline so I can see.

    Thread Starter SteveFromAus

    (@stevefromaus)

    This is the code I have in “additional css”

    .widget {
    border-style: solid;
    border-width: thin;
    border-color: white;
    padding: 2em;
}
a:link {
box-shadow: none;
}
a:visited {
box-shadow: none;
}
a:hover {
box-shadow: none;
}

    and this is the code I have in “Custom HTML” for the footer widget. 

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}
</style>
</head>
<body>

<ul>
<li><a href="castleimages.com.au/the-fine-print/
">Terms and Conditions&emsp;</a></li>
<li><a href="https://castleimages.com.au/copyright-notice/">Copyright Notice&emsp;</a></li>
<li><a href="https://castleimages.com.au/privacy-policy/">Privacy Policy</a></li>
</ul>

</body>
</html>

    I have left my site online with the above coding so you can see the problem.

    Regards,

    Steve

    • This reply was modified 5 years, 10 months ago by SteveFromAus.
    Thread Starter SteveFromAus

    (@stevefromaus)

    An update,

    It appears as though it is working correctly with the above coding on Firefox and Chrome desktop browsers, but not on Microsoft Edge. In edge, links are not underlined at first, but become underlined once accessed.

    I was doing my testing on Edge as I had my editing open via Firefox.

    Question now is, what do I need to do to get it working properly on Edge?

    Regards,

    Steve

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Links one one line with spaces’ is closed to new replies.