On Tue, 25 Oct 2022 13:14 -0500, pe...@easthope.ca wrote:
> Hi,
>
> Off scope but I don't know a better place to ask.
>
> If this HTML text is in a file, a browser should be able to render it.
>
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <title> Test.html</title>
> <meta charset="UTF-8">
> <style>
> body { color: black; background: white; }
> div.inline { display: inline; justify-content: space-between; }
> </style>
> </head>
> <body>
> <div class="inline"><span>left</span><span>right</span></div>
> </body>
> </html>
>
> In bullseye, Firefox-esr, "leftright" is rendered at the left edge of
> the window.
>
> CSS "inline" puts the two words on a line as expected.
>
> I included "justify-content: space-between" with the objective of
> putting "left" at the left of the window and "right" at the right.
>
> Why doesn't it work? How should it be fixed?
'display:inline' is only useful if you have more than one div.
However, 'display:inline' was obviously meant for 'span', not for 'div',
but 'span' _is_ already an inline element.
What's more, the 'justify-content' property belongs to the Flexbox model,
but you have not set the 'display' property to 'flex'.
This code works better:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Test.html</title>
<meta charset="UTF-8">
</head>
<body>
<div style="display:flex; justify-content:space-between">
<div>left</div>
<div>right</div>
</div>
</body>
</html>
BTW, 'color: black' and 'background: white' is already the default for
'body', AFAIK.
More info about the Flexbox model: www.w3schools.com/css/css3_flexbox.asp
