What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

unordered list and CSS

louis

New member
i have unordered list on a page. but my list are showing horizontal not vertical like i want. my css is in my html page.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Capture Ability - The Power of The iPhone</title>
<link rel="stylesheet" href="css/style.css" type="text/css">



<style>
ul.story {
list-style-type: none;
margin: 0;
padding: 0;
justify-content: left; /* Aligns the list items to the left */
background-color: #fff;
}
li {
position: relative;
}
li a {
display: block;
color: #800020;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #fff;
}
</style>


</head>
<body>
<div class="container">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="inspirational.html">Inspirational</a></li>
<li class="dropdown">
<a href="javascript:void(0)">Technology</a>
<div class="dropdown-content">
<a href="tech1.html">The Power of The iPhone</a>
<a href="tech2.html">Wheelchair Camera Mount</a>
<a href="tech3.html">Outdoor Camera Mount</a>
<a href="tech4.html">Mini Tripods</a>
<a href="tech5.html">Fixed Lens Cameras</a>
<a href="tech6.html">Creating a New Device</a>
<a href="tech7.html">The Accessible Tripod</a>
<a href="tech8.html">Window Photography</a>
</div>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div style="text-align: left">
<img src="images/camerawheel.jpg" alt="camera being held to the side of a wheelchair">
</div>
<h1>Capture Ability</h1>
<p>"Capturing Dreams Beyond Barriers: Empowering Photographers of All Abilities!"</p>
<hr>
<h4>Choosing the best accessible camera for a person with disabilities - July 18, 2024</h4>
<p>Choosing the best accessible camera for a person with disabilities involves considering their specific needs and challenges. Here are some options that cater to different types of disabilities:</p>
<h3><strong>For Users with Limited Mobility or Dexterity:</strong></h3>
<ul class="story">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<hr>
<footer style="text-align: center">
<p>© 2024 Capture Ability. All rights reserved.</p>
</footer>
</div>
</body>
</html>
 
Back
Top