Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

three links on one line?

3 views
Skip to first unread message

Dale

unread,
Feb 20, 2021, 11:50:57 AM2/20/21
to
Hi!

I want to have three links on one line.

I can get the three links but the underline doesn't seem to break
between them.

Any ideas?

Here is a code attempt ...

<!DOCTYPE html>

<html lang="en">


<body>


<h2>Metaphysics in process ...</h2><br>

<ul>
<li><a href="https://en.wikipedia.org/wiki/Meta">Meta? </a>
<a href="https://en.wikipedia.org/wiki/Physics"> Physics? </a>
<a href="https://en.wikipedia.org/wiki/Metaphysics">
Metaphysics?</a><br/><br></li>


</ul>



</body>

</html>

Thank You!


--
Minister Dale Kelly, Ph.D. ->
Universalist <-> Mystic <-> Medium

https://www.dalekelly.org/

Board Certified Holistic Health Practitioner
Board Certified Alternative Medical Practitioner

Dale

unread,
Feb 20, 2021, 12:09:53 PM2/20/21
to
On 2/20/2021 11:50 AM, Dale wrote:
> Hi!
>
> I want to have three links on one line.
>
> I can get the three links but the underline doesn't seem to break
> between them.
>
> Any ideas?
>
> Here is a code attempt ...
>
> <!DOCTYPE html>
>
> <html lang="en">
>
>
>     <body>
>
>
>         <h2>Metaphysics in process ...</h2><br>
>
>         <ul>
>                     <li><a
> href="https://en.wikipedia.org/wiki/Meta">Meta?    </a>
>                     <a href="https://en.wikipedia.org/wiki/Physics">
> Physics?    </a>
>                     <a
> href="https://en.wikipedia.org/wiki/Metaphysics">
> Metaphysics?</a><br/><br></li>
>
>
>         </ul>
>
>
>
>     </body>
>
> </html>
>
> Thank You!
>
>

did some web search ...

if you as &nbsp between the links there is space between the links on
the same line

Thank You !

Dale

unread,
Feb 20, 2021, 12:21:13 PM2/20/21
to
have to add a semi-colon after &nbsp

&nbsp;

works without it for me, but doesn't clear the W3C checker

Dale

unread,
Feb 20, 2021, 12:28:32 PM2/20/21
to
nbsp is for "non-breaking space"

https://www.w3schools.com/html/html_entities.asp

Lewis

unread,
Feb 20, 2021, 1:07:04 PM2/20/21
to
In message <dso46h....@news.alt.net> Dale <da...@dalekelly.org> wrote:
> I can get the three links but the underline doesn't seem to break
> between them.

Why would it? You have nothing between the links

>
> <ul>
> <li><a href="https://en.wikipedia.org/wiki/Meta">Meta? </a>
> <a href="https://en.wikipedia.org/wiki/Physics"> Physics? </a>
> <a href="https://en.wikipedia.org/wiki/Metaphysics">
> Metaphysics?</a><br/><br></li>
> </ul>

Put a nbsp; after the "</a>" Also, this is not the way to do this, you
are abusing the li tag.

--
Help me, Obi-wan Kenobi. You're my only hope.

😉 Good Guy 😉

unread,
Feb 20, 2021, 1:33:44 PM2/20/21
to
On 20/02/2021 16:50, Dale wrote:

               
        <ul>
                    <li><a href="https://en.wikipedia.org/wiki/Meta">Meta?    </a>
                    <a href="https://en.wikipedia.org/wiki/Physics">    Physics?    </a>
                    <a href="https://en.wikipedia.org/wiki/Metaphysics"> Metaphysics?</a><br/><br></li>
        </ul>


Change your code to this:

<ul>
        <li><a href="https://en.wikipedia.org/wiki/Meta">Meta?</a></li>
        <li><a href="https://en.wikipedia.org/wiki/Physics"> Physics?</a></li>
        <li><a href="https://en.wikipedia.org/wiki/Metaphysics">Metaphysics?</a></li>
</ul>

Then use this css:

        li {
            display: inline-block;
            font-size: 20px;
            padding-right: 30px;
        }
        li:last-child {
            margin-right: 0;
        }


--

With over 1.2 billion devices now running Windows 10, customer satisfaction is higher than any previous version of windows.

Tom Furie

unread,
Feb 20, 2021, 1:59:05 PM2/20/21
to
On 2021-02-20, Dale <da...@dalekelly.org> wrote:
> I want to have three links on one line.
>
> I can get the three links but the underline doesn't seem to break
> between them.
> <li><a href="https://en.wikipedia.org/wiki/Meta">Meta? </a>
> <a href="https://en.wikipedia.org/wiki/Physics"> Physics? </a>
> <a href="https://en.wikipedia.org/wiki/Metaphysics">
> Metaphysics?</a><br/><br></li>

Put each link in its own <li> element and use CSS to format the list as a
single line.

Dale

unread,
Feb 20, 2021, 2:03:15 PM2/20/21
to
I don't prefer inline styles, just a whole one for my site

I did get it to work using ... &nbsp; ... between links

Thank You anyhow!

Dale

unread,
Feb 20, 2021, 2:05:06 PM2/20/21
to
I prefer a single CSS for my site

I did get it working using ...

&nbsp;

between the links

Dale

unread,
Feb 20, 2021, 2:06:57 PM2/20/21
to
I did find &nbsp;

what is the "abuse"?

it checks using W3C Validator ...

the site is in my signature

Jukka K. Korpela

unread,
Feb 20, 2021, 3:04:20 PM2/20/21
to
Dale wrote:

> I want to have three links on one line.

Stop wanting that, if this means that you have no visible characters
between them.

> I can get the three links but the underline doesn't seem to break
> between them.

Well, for some odd reason, the space characters that you have *inside*
link texts cause this. If you have spaces just *between* them, the
underline breaks:

<li><a href="https://en.wikipedia.org/wiki/Meta">Meta?</a>
<a href="https://en.wikipedia.org/wiki/Physics">Physics?</a>
<a href="https://en.wikipedia.org/wiki/Metaphysics">Metaphysics?</a>

For usability and accessibility, links should be separated by something
non-blank.

😉 Good Guy 😉

unread,
Feb 20, 2021, 5:53:14 PM2/20/21
to
On 20/02/2021 19:03, Dale wrote:


I don't prefer inline styles, just a whole one for my site


You really need to learn how CSS works and how creating a class can target specific html tags.  The css can be put in a single file as you like to do. I won't spend time explaining this to you as you have already thrown in the white towel!!.


I did get it to work using ... &nbsp; ... between links

Good for you. 

Ray_Net

unread,
Feb 20, 2021, 6:08:21 PM2/20/21
to
In article <dso46h....@news.alt.net>, da...@dalekelly.org says...
>
> Hi!
>
> I want to have three links on one line.
>
> I can get the three links but the underline doesn't seem to break
> between them.
>
> Any ideas?
>
> Here is a code attempt ...
>
> <!DOCTYPE html>
>
> <html lang="en">
>
>
> <body>
>
>
> <h2>Metaphysics in process ...</h2><br>
>
> <ul>
> <li><a href="https://en.wikipedia.org/wiki/Meta">Meta? </a>
> <a href="https://en.wikipedia.org/wiki/Physics"> Physics? </a>
> <a href="https://en.wikipedia.org/wiki/Metaphysics">
> Metaphysics?</a><br/><br></li>
>
>
> </ul>
>
>
>
> </body>
>
> </html>
>
> Thank You!

<br><a href="https://en.wikipedia.org/wiki/Meta">Meta?</a>&nbsp;+&nbsp;
<a href="https://en.wikipedia.org/wiki/Physics">Physics?</a>&nbsp;=&nbsp;

Arno Welzel

unread,
Feb 20, 2021, 6:52:23 PM2/20/21
to
Dale:

> On 2/20/2021 1:59 PM, Tom Furie wrote:
>> On 2021-02-20, Dale <da...@dalekelly.org> wrote:
>>> I want to have three links on one line.
>>>
>>> I can get the three links but the underline doesn't seem to break
>>> between them.
>>> <li><a href="https://en.wikipedia.org/wiki/Meta">Meta? </a>
>>> <a href="https://en.wikipedia.org/wiki/Physics"> Physics? </a>
>>> <a href="https://en.wikipedia.org/wiki/Metaphysics">
>>> Metaphysics?</a><br/><br></li>
>>
>> Put each link in its own <li> element and use CSS to format the list as a
>> single line.
>>
>
> I prefer a single CSS for my site

The above is not CSS! It is HTML!

> I did get it working using ...
>
> &nbsp;
>
> between the links

Which is HTML and not CSS!


--
Arno Welzel
https://arnowelzel.de

Arno Welzel

unread,
Feb 20, 2021, 6:58:53 PM2/20/21
to
Dale:

> Hi!
>
> I want to have three links on one line.
>
> I can get the three links but the underline doesn't seem to break
> between them.

> <a href="https://en.wikipedia.org/wiki/Meta">Meta? </a>

Well - there are spaces inside the link.

> <a href="https://en.wikipedia.org/wiki/Physics"> Physics? </a>

And here as well.

> <a href="https://en.wikipedia.org/wiki/Metaphysics">
> Metaphysics?</a><br/><br></li>

And here also.

One solution with your code would be:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.nowrap { white-space: nowrap; }
</style>
</head>
<body>
<h2>Metaphysics in process ...</h2><br>
<ul>
<li class="nowrap">
<a href="https://en.wikipedia.org/wiki/Meta">Meta?</a>
<a href="https://en.wikipedia.org/wiki/Physics">Physics?</a>
<a href="https://en.wikipedia.org/wiki/Metaphysics">Metaphysics?</a>
<br>
<br>
</li>
</ul>
</body>
</html>

However - why do you create list (<ul>) with only one item (<li>) to
display three links? What's the point of this? And why the <br> at the end?

You should really first learn how HTML works at all.

Lewis

unread,
Feb 20, 2021, 8:50:39 PM2/20/21
to
In message <dsoc5h....@news.alt.net> Dale <da...@dalekelly.org> wrote:
> On 2/20/2021 1:07 PM, Lewis wrote:
>> In message <dso46h....@news.alt.net> Dale <da...@dalekelly.org> wrote:
>>> I can get the three links but the underline doesn't seem to break
>>> between them.
>>
>> Why would it? You have nothing between the links
>>
>>>
>>> <ul>
>>> <li><a href="https://en.wikipedia.org/wiki/Meta">Meta? </a>
>>> <a href="https://en.wikipedia.org/wiki/Physics"> Physics? </a>
>>> <a href="https://en.wikipedia.org/wiki/Metaphysics">
>>> Metaphysics?</a><br/><br></li>
>>> </ul>
>>
>> Put a nbsp; after the "</a>" Also, this is not the way to do this, you
>> are abusing the li tag.
>>

> I did find &nbsp;

> what is the "abuse"?

Read the definition for ul and li at W3.

<https://dev.w3.org/html5/html-author/#the-ul-element>

You are not producing an unordered list, you are using the UL and LI
tags to produce a layout on your screen. That is the role of CSS, not
HTML.

> it checks using W3C Validator ...

I didn't say the code was invalid. It can be valid and wrong, as your
code is.


--
"Those people who think they know everything are a great annoyance to
those of us who do." - Isaac Asimov

Thomas 'PointedEars' Lahn

unread,
Feb 22, 2021, 2:01:24 PM2/22/21
to
Dale wrote:

> On 2/20/2021 11:50 AM, Dale wrote:
>> I want to have three links on one line.
>>
>> I can get the three links but the underline doesn't seem to break
>> between them.
>
> if you as &nbsp between the links there is space between the links on
> the same line

That is not the proper way to do it.

First, one wonders why you are using an unordered list (“ul” element) if you
are not using the list.

Your markup should look as follows instead.

<ul>
<li><a href="https://en.wikipedia.org/wiki/Meta">Meta</a></li>
<li><a href="https://en.wikipedia.org/wiki/Physics">Physics</a></li>
<li><a href="https://en.wikipedia.org/wiki/Metaphysics"
>Metaphysics</a></li>
</ul>

Next, you would look into formatting the list such that the items are next
to each other. There are several ways. One of them is the following:

HTML:

<ul class='horizontal'>
<li><a href="https://en.wikipedia.org/wiki/Meta">Meta</a></li>
<li><a href="https://en.wikipedia.org/wiki/Physics">Physics</a></li>
<li><a href="https://en.wikipedia.org/wiki/Metaphysics"
>Metaphysics</a></li>
</ul>

CSS:

ul.horizontal {
list-style: none;
padding-left: 0;
}

ul.horizontal:after {
clear: left;
display: block;
content: '';
}

ul.horizontal li {
margin-left: 1em;
float: left;
white-space: nowrap;
}

ul.horizontal li:first-child {
margin-left: 0;
}

If this is your main navigation, you should make it the content of a “nav”
element.

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Thomas 'PointedEars' Lahn

unread,
Feb 22, 2021, 7:00:30 PM2/22/21
to
Dale wrote:

> I prefer a single CSS for my site

You are not making sense. Nobody even suggested that you use two "CSS".

> I did get it working using ...
>
> &nbsp;
>
> between the links

You broke it instead.

Thomas 'PointedEars' Lahn

unread,
Feb 22, 2021, 7:03:00 PM2/22/21
to
Dale wrote:

> On 2/20/2021 1:33 PM, 😉 Good Guy 😉 wrote:
>> Change your code to this:
>>> <ul>
>>> <li><a href="https://en.wikipedia.org/wiki/Meta">Meta?</a></li>
>>> <li><a href="https://en.wikipedia.org/wiki/Physics">
>>> Physics?</a></li>
>>> <li><a
>>> href="https://en.wikipedia.org/wiki/Metaphysics">Metaphysics?</a></li>
>>> </ul>
>>
>> Then use this css:
>>
>>> li {
>>> display: inline-block;
>>> font-size: 20px;
>>> padding-right: 30px;
>>> }
>>> li:last-child {
>>> margin-right: 0;
>>> }
>
> I don't prefer inline styles, just a whole one for my site

Nobody suggested inline styles.

> I did get it to work using ... &nbsp; ... between links

Again: You made it WORSE. Now not only one list element stands for three
links, which does not make sense, but also the links will not wrap anymore,
producing horizontal scrollbars if the viewport is not wide enough.

Dale

unread,
Feb 22, 2021, 10:06:13 PM2/22/21
to
On 2/20/2021 6:58 PM, Arno Welzel wrote:
> You should really first learn how HTML works at all.

I might be a hack but I have been at it over 25 years

someone of it for work applications

Dale

unread,
Feb 22, 2021, 10:14:19 PM2/22/21
to
On 2/20/2021 8:50 PM, Lewis wrote:
> You are not producing an unordered list, you are using the UL and LI
> tags to produce a layout on your screen. That is the role of CSS, not
> HTML.

an ordered list was numbered I think

I'm a CSS beginner

my style sheet doesn't do much other than allowing for

1) different layout for computer, laptop/notepad, and smartphone
2) automatic resizing of elements to fit screen

got most of this from W3Schools

I remember when W3C had online learning, 25+ years ago

Thomas 'PointedEars' Lahn

unread,
Feb 23, 2021, 4:23:58 AM2/23/21
to
Dale wrote:

> On 2/20/2021 8:50 PM, Lewis wrote:
>> You are not producing an unordered list, you are using the UL and LI
>> tags to produce a layout on your screen. That is the role of CSS, not
>> HTML.
>
> an ordered list was numbered I think

Not necessarily; the labeling can be changed with CSS, for example

ol {
list-style-type: lower-alpha;
}

But the point they, too, are making, which you are *still* missing, is that
you are *misusing* the “ul” element:

A list with *one* item is NOT actually a list.

So either you should not use a list, or you should make each link a list
item, ending up with a list of *3 items* containing one link each.

> I'm a CSS beginner

You are obviously also a *HTML* beginner. Since you probably will have to
unlearn nonsense about HTML that you learned at W3Schools, you should start
from scratch at

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started

> my style sheet doesn't do much other than allowing for
>
> 1) different layout for computer, laptop/notepad, and smartphone
> 2) automatic resizing of elements to fit screen

How many more times? You are doing it

*W* *R* *O* *N* *G*!

> got most of this from W3Schools

So W3Schools (≠ W3C) ist *still* junk? :-(

<http://w3fools.com/>

> I remember when W3C had online learning, 25+ years ago

We’ve been having <https://developer.mozilla.org/en-US/docs/Web> for years
now.

Thomas 'PointedEars' Lahn

unread,
Feb 23, 2021, 4:35:30 AM2/23/21
to
Dale wrote:

> On 2/20/2021 6:58 PM, Arno Welzel wrote:
>> You should really first learn how HTML works at all.
>
> I might be a hack but I have been at it over 25 years
>
> someone of it for work applications

I hate to break it to you, but you have *no clue*.

Not only *evidently* do you not know the basics, but also HTML from 25 years
ago – HTML 2.0 (obsoleted) was published in 1995, which was ≈ 25 years ago,
so who cares what you did *more* than 25 years ago? – looks very different
from the HTML that we must be writing today as 25 years ago many devices and
software applications that can use HTML did not exist yet. I have been
there.

Also, there has been growing awareness that Web sites have to be accessible,
which in some developed countries is even a requirement for public-service
Web sites now.

“One of the great challenges in life is knowing enough about a subject
to think you’re right, but not enough about the subject to know
you’re wrong.”

–Neil deGrasse Tyson

I strongly recommend that you forget everything that you *think* you know
about HTML (today), and start learning it from scratch.

Lewis

unread,
Feb 23, 2021, 4:50:58 AM2/23/21
to
In message <dsuh05....@news.alt.net> Dale <da...@dalekelly.org> wrote:
> On 2/20/2021 6:58 PM, Arno Welzel wrote:
>> You should really first learn how HTML works at all.

> I might be a hack but I have been at it over 25 years

Ah, so you ignorance is a CHOICE.

That doesn’t make it better.

> someone of it for work applications

You haven’t earned whatever money you were paid for HTML as you know less
that a first week student on how HTML and CSS work.

No wonder you are using W3Schools.



--
"He raised his hammer defiantly and opened his mouth to say, "Oh,
yeah?" but stopped, because just by his ear he heard a growl. It
was quite low and soft, but it had a complex little waveform
which went straight down into a little knobbly bit in his spinal
column where it pressed an ancient button marked Primal Terror."

Jukka K. Korpela

unread,
Feb 23, 2021, 5:43:41 AM2/23/21
to
Thomas 'PointedEars' Lahn wrote:

> But the point they, too, are making, which you are*still* missing, is that
> you are*misusing* the “ul” element:

Probably, especially since there does not seem to be any reason for
using an <ul> element with a single <li> element inside it. Perhaps the
author just wanted to have a bullet and did not know how to produce a
bullet character “∙”.

> A list with*one* item is NOT actually a list.

I would say it is. Even a list with no items, <ul></ul>, is a list,
although a very reduced and special case. It might serve as a
placeholder for a “real” list to come, perhaps via client-side scripting
(though one could dynamically generate the <ul> element too, of course).

A list with a single item might be used, for example, in a context where
elements with the same pattern are used to describe something and this
pattern contains, for example, a list of comments. When there is just
one comment, it would still make sense to make it a list item, to
indicate the structural correspondence.

😉 Good Guy 😉

unread,
Feb 23, 2021, 12:23:05 PM2/23/21
to
On 20/02/2021 19:03, Dale wrote:


I don't prefer inline styles, just a whole one for my site

I did get it to work using ... &nbsp; ... between links

Thank You anyhow!

Well in that case just put your anchor tags in one line like so:

<a href="https://en.wikipedia.org/wiki/Meta">Meta?</a>&nbsp;|&nbsp;<a href="https://en.wikipedia.org/wiki/Physics"> Physics?</a>&nbsp;|&nbsp;<a href="https://en.wikipedia.org/wiki/Metaphysics">Metaphysics?</a>

It will work for you and it will also remove that ugly dot in-front of your links.  Hey it will work for you but what the heck if it is the right way or not.  That's what they did 25 years ago and you are a veteran of that era.  w3schools must have taught you that.

I am not sure whether you know it but W3Schools has NOTHING to do with the "World Wide Web Consortium" or W3C for short.  They have just pinched the name to fool people like you and in some cases defraud as well.

Dale

unread,
Feb 23, 2021, 8:51:54 PM2/23/21
to
On 2/23/2021 12:23 PM, 😉 Good Guy 😉 wrote:
> On 20/02/2021 19:03, Dale wrote:
>>
>>
>> I don't prefer inline styles, just a whole one for my site
>>
>> I did get it to work using ... &nbsp; ... between links
>>
>> Thank You anyhow!
>>
> Well in that case just put your anchor tags in one line like so:
>
> <a href="https://en.wikipedia.org/wiki/Meta">Meta?</a>&nbsp;|&nbsp;<a
> href="https://en.wikipedia.org/wiki/Physics">
> Physics?</a>&nbsp;|&nbsp;<a
> href="https://en.wikipedia.org/wiki/Metaphysics">Metaphysics?</a>
>
> It will work for you and it will also remove that ugly dot in-front of
> your links.  Hey it will work for you but what the heck if it is the
> right way or not.  That's what they did 25 years ago and you are a
> veteran of that era.  w3schools must have taught you that.
>
> I am not sure whether you know it but W3Schools has NOTHING to do with
> the "World Wide Web Consortium" or W3C for short.  They have just
> pinched the name to fool people like you and in some cases defraud as well.
>
>

I remember when W3C had a school and W3's was filled with advertisement

I always made sure I was using W3C

W3 is a lot better now, and I can't find W3C's anymore anyway ...

Thomas 'PointedEars' Lahn

unread,
Feb 24, 2021, 11:38:54 AM2/24/21
to
Dale wrote:

> I remember when W3C had a school and W3's was filled with advertisement

Either your memory deceives you or you are simply trolling (given your
record I find the latter more likely). The W3C Web site was *never*
“filled with advertisement”. It is and has always been a not-for-profit
organization.

Proof:

<http://web.archive.org/web/19980114162644/http://w3c.org/>

> I always made sure I was using W3C
>
> W3 is a lot better now, and I can't find W3C's anymore anyway ...

What are you babbling about?

There is no “W3”. It has *always* been the World Wide Web Consortium (W3C).
0 new messages