Arrange the <li> elements in a horizontal row at the bottom of the page

Question

Arrange the <li> elements in a horizontal row at the bottom of the page

Is there a way to align my list items horizontally without using CSS in HTML?

Additionally, I would like the li items to appear below the image at the bottom of the page.

I've experimented with different attributes and searched extensively, but nothing seems to work.

<div style="background-color:black; margin-top:0px">
    <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" style="float:left; margin-right:10px" height="400" width="400"></a>
    <p style="color:brown">Mercury is the smallest planet, and it's closest to the Sun of the eight planets in the Solar System. It has an orbital period of about 88 Earth days.</p>
</div>

<br><br><br><br>

<div>
    <ul style="list-style:none">
        <li style="text-align:left"><a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html"><p style="color:blue">Previous room</p></a>
        <li style="text-align:right"><a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html"><p style="color:blue">Next room</p></a>
    </ul>
</div>

html css

Answer 1

Answer №1

To enhance the appearance of your li element, apply this style attribute:

style="text-align:left;float:left;display:inline-block;"

Be sure to include the following properties:

float:left and display:inline-block

Answer 2

To enhance the appearance of your li element, apply this style attribute:

style="text-align:left;float:left;display:inline-block;"

Be sure to include the following properties:

float:left and display:inline-block

Answer 3

Answer №2

Modify

<li style="text-align:left">

so that it reads

<li style="float:left">

in order to display the list items next to each other.

Answer 4

Modify

<li style="text-align:left">

so that it reads

<li style="float:left">

in order to display the list items next to each other.

Answer 5

Answer №3

I want to arrange my list items next to each other in a horizontal line.

To achieve this, apply the following style: display: inline-block on the li elements.

In addition, I am aiming to have the list items positioned below an image (at the bottom of the page).

You can accomplish this by using the style:

position: fixed; left: 0; bottom: 0; width: 100%;

on the parent div element.

(See a live example here)

<div style="position: fixed; left: 0; bottom: 0; width: 100%;">
    <ul style="list-style:none;">
        <li style="text-align:left; display: inline-block;">
            <a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html">
                <p style="color:blue">Previous room</p>
            </a>
        </li>
        <li style="text-align:right; display: inline-block;">
            <a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html">
                <p style="color:blue">Next room</p>
            </a>
        </li>
    </ul>
</div>

Answer 6

I want to arrange my list items next to each other in a horizontal line.

To achieve this, apply the following style: display: inline-block on the li elements.

In addition, I am aiming to have the list items positioned below an image (at the bottom of the page).

You can accomplish this by using the style:

position: fixed; left: 0; bottom: 0; width: 100%;

on the parent div element.

(See a live example here)

<div style="position: fixed; left: 0; bottom: 0; width: 100%;">
    <ul style="list-style:none;">
        <li style="text-align:left; display: inline-block;">
            <a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html">
                <p style="color:blue">Previous room</p>
            </a>
        </li>
        <li style="text-align:right; display: inline-block;">
            <a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html">
                <p style="color:blue">Next room</p>
            </a>
        </li>
    </ul>
</div>

Answer 7

Answer №4

Is it something similar to this https://jsfiddle.net/3v8j0xf1/?

Modified

<div style="background-color:black; margin-top:0px">...

changed to

<div style="background-color:black; margin-top:0px; float: left;">...

and list items (li's)

<li style="text-align:left">...
<li style="text-align:right">...

to

<li style="text-align:left; float: left;">...
<li style="text-align:right; float: left; margin-left: 20px;">

Answer 8

Is it something similar to this https://jsfiddle.net/3v8j0xf1/?

Modified

<div style="background-color:black; margin-top:0px">...

changed to

<div style="background-color:black; margin-top:0px; float: left;">...

and list items (li's)

<li style="text-align:left">...
<li style="text-align:right">...

to

<li style="text-align:left; float: left;">...
<li style="text-align:right; float: left; margin-left: 20px;">

Answer 9

Answer №5

To have list items display side by side, you typically need to use CSS. However, I noticed that you are utilizing inline CSS, which suggests that external CSS may not be an option for you.

Here is my suggestion addressing both aspects of your query. I have also eliminated the paragraph tags inside the list items as they are not recommended in that context.

<div style="background-color:black; margin-top:0px">
    <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" style="float:left; margin-right:10px" height="400" width="400"></a>
    <p style="color:brown">Mercury is the smallest planet and the closest to the Sun among the eight planets in our Solar System. It completes an orbit approximately every 88 Earth days.</p>
</div>

<div style="clear:both">
    <ul style="list-style:none;padding:0">
        <li style="text-align:left;display:inline-block;width:50%;color:blue"><a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html">Previous room</a></li>
        <li style="text-align:right;display:inline-block;width:50%;color:blue"><a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html">Next room</a></li>
    </ul>
</div>

Answer 10

To have list items display side by side, you typically need to use CSS. However, I noticed that you are utilizing inline CSS, which suggests that external CSS may not be an option for you.

Here is my suggestion addressing both aspects of your query. I have also eliminated the paragraph tags inside the list items as they are not recommended in that context.

<div style="background-color:black; margin-top:0px">
    <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" style="float:left; margin-right:10px" height="400" width="400"></a>
    <p style="color:brown">Mercury is the smallest planet and the closest to the Sun among the eight planets in our Solar System. It completes an orbit approximately every 88 Earth days.</p>
</div>

<div style="clear:both">
    <ul style="list-style:none;padding:0">
        <li style="text-align:left;display:inline-block;width:50%;color:blue"><a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html">Previous room</a></li>
        <li style="text-align:right;display:inline-block;width:50%;color:blue"><a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html">Next room</a></li>
    </ul>
</div>

Answer 11

Answer №6

To enhance the wrapper div, I have included bottom:0; position:absolute. Additionally, ensure to incorporate float:left; to the li elements.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
</head>
<body>
<div style="background-color:black; margin-top:0px">
    <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" style="float:left; margin-right:10px" height="400" width="400"></a>
    <p style="color:brown">Mercury is the smallest planet, and it's closest to the Sun of the eight planets in the Solar System. It has an orbital period of about 88 Earth days.</p>
</div>

<br><br><br><br>

<div style="bottom: 0px; position: absolute;">
    <ul style="list-style:none">
        <li style="text-align: right; float: left; margin-right: 10px;">
            <a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html"><p style="color:blue">Previous room</p></a>
        </li>
        <li style="text-align: right; float: left; margin-right: 10px;">
            <a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html"><p style="color:blue">Next room</p></a>
        </li>
    </ul>
</div>
</body>
</html>

You might want to consider removing the
tags for a cleaner look.

For a visual representation, check out the FIDDLE DEMO - https://jsfiddle.net/npralhad/3masxfkL/

Answer 12

To enhance the wrapper div, I have included bottom:0; position:absolute. Additionally, ensure to incorporate float:left; to the li elements.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
</head>
<body>
<div style="background-color:black; margin-top:0px">
    <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" style="float:left; margin-right:10px" height="400" width="400"></a>
    <p style="color:brown">Mercury is the smallest planet, and it's closest to the Sun of the eight planets in the Solar System. It has an orbital period of about 88 Earth days.</p>
</div>

<br><br><br><br>

<div style="bottom: 0px; position: absolute;">
    <ul style="list-style:none">
        <li style="text-align: right; float: left; margin-right: 10px;">
            <a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html"><p style="color:blue">Previous room</p></a>
        </li>
        <li style="text-align: right; float: left; margin-right: 10px;">
            <a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html"><p style="color:blue">Next room</p></a>
        </li>
    </ul>
</div>
</body>
</html>

You might want to consider removing the
tags for a cleaner look.

For a visual representation, check out the FIDDLE DEMO - https://jsfiddle.net/npralhad/3masxfkL/

Answer 13

Answer №7

If you're unsure about the specific design you're aiming for, consider using inline-block on the list items as others have suggested. I've also incorporated a % width to the image for some responsiveness and to enforce the line break.

<div style="background-color:black; margin-top:0px">
  <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" alt="" style="float:left; margin-right:10px; height:auto; width:100%;" /></a>
  <p style="color:brown">Mercury is the smallest planet, and it's closest to the Sun of the eight planets in the Solar System. It has an orbital period of about 88 Earth days.</p>
</div>
<br/>
<div style="position:relative; bottom:0;">
  <ul style="list-style:none">
    <li style="display:inline-block;"><a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html"><p style="margin:0; color:blue">Previous room</p></a>
    <li style="display:inline-block; margin-left:3em;"><a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html"><p style="color:blue">Next room</p></a>
  </ul>
</div>

Answer 14

If you're unsure about the specific design you're aiming for, consider using inline-block on the list items as others have suggested. I've also incorporated a % width to the image for some responsiveness and to enforce the line break.

<div style="background-color:black; margin-top:0px">
  <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" alt="" style="float:left; margin-right:10px; height:auto; width:100%;" /></a>
  <p style="color:brown">Mercury is the smallest planet, and it's closest to the Sun of the eight planets in the Solar System. It has an orbital period of about 88 Earth days.</p>
</div>
<br/>
<div style="position:relative; bottom:0;">
  <ul style="list-style:none">
    <li style="display:inline-block;"><a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html"><p style="margin:0; color:blue">Previous room</p></a>
    <li style="display:inline-block; margin-left:3em;"><a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html"><p style="color:blue">Next room</p></a>
  </ul>
</div>

Arrange the <li> elements in a horizontal row at the bottom of the page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Retrieve JSON data from Form Submission

Show angular variable data in a table based on their index

PHP allows for easy looping through an array based on certain conditions. By incorporating

Firefox does not support CSS transitions

Tips for preserving the dimensions of a container even after adding text dynamically

Ensure that all `thead th` elements remain in a fixed/sticky position when using a data

Creating a visually appealing layout with rows of images of varying heights to ensure consistent spacing between text

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

Animate CSS during page load

Steady Content of a Parallax Webpage

Creating a Mobile-friendly Sidebar: A Guide to Angular 5

Changing the Size of a Div Element in Internet Explorer 6

Problems Arising from Center Aligning a Horizontal Navigation Menu

Having performance issues with an HTML5/JavaScript game on Internet Explorer 8

When the background image URL is altered, the button size automatically adjusts

Unable to establish socket.io connection on the client side

What is the best way to assign a different set of sub tabs to each individual tab?

Display the input in the text box before making a selection from the dropdown menu

Problem with CSS multi-level dropdown navigation in a vertical layout

What is the best way to use CSS to center two blocks with space in between them?