Horizontal List

HTML & CSS
,
1

Hi,
I’m trying to make the list to output in a horizontal list.
What would be the best way to do this?

<!DOCTYPE html>
<html>
<head>
<font>
</font>
<style>
</style>
<body>
<img src="nexus6p.png" alt="nexus6p" style="width:280px;height:228px;">

<?php
require ('sql_connect.php');
$query = "SELECT * FROM Phones WHERE Phones='Nexus 6P' OR Phones='Nexus 5X'";
$result = mysql_query($query);

echo "<table>";
while($row = mysql_fetch_array($result))
{
        echo "<ul><h4>" . $row['Phones'] . "</h4><li>" . $row['Manufacturer'] . "</li><li>" .
        $row['Operating System'] . "</li><li>" . $row['SIM'] .  "</li><li>" . $row['Front Camera'] . "</li><li>" . $row['Storage']
        . "</li><li>" . $row['Charging Port'] . "</li></ul>";
}
echo "</table>";
mysql_close();
?>

</body>
</head>
</html>
2

The quick answer: li { display: inline-block }

The longer answer underway…

2 Likes
3

When posting in the html & css forum, it’s best to show just html & css code. Showing the php just confuses things. Show the result of the php.

But from what I can decipher of your code, the html is all wrong.
You start with an opening table tag, then open a ul, followed by a h4, then an li. This is completely invalid code. This is wrong in more ways than I would wish to describe.

Not to mention the continued use of the obsolete mysql api.

Maybe best to describe the end result you want and start over.

2 Likes
4

It looks like what you actually want is a table, which as tables should do, contain rows, not lists, which are naturally horizontal.
I believe I already showed you how to output a table from a database here.

But still, looking at your code, I think you need to go and learn some basic principles of html. There are too many mistakes that would not pass validation.

<font>
</font>

Font tags are obsolete, don’t use them, they didn’t belong in the head section anyway.

<img src="nexus6p.png" alt="nexus6p" style="width:280px;height:228px;">

Using in-line styling via the style attribute is bad practice, don’t do it. In this case, being an img it is good practice to set the width and height, but do it via the height and width attributes:-

<img src="nexus6p.png" alt="nexus6p" width="280" height="228">

A <ul> element cannot be a direct descendant of a <table> element.
An <h4> cannot be a direct descendant of a <ul> element. The h4 should only be used as a fourth level heading, that is a heading to a section of content nested beneath previous levels of h1, h2 and h3.

4 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.