How to Style the Ul List to a Single Line

How to style the UL list to a single line

ul li{
display: inline;
}

For more see the basic list options and a basic horizontal list at listamatic. (thanks to Daniel Straight below for the links).

Also, as pointed out in the comments, you probably want styling on the ul and whatever elements go inside the li's and the li's themselves to get things to look nice.

How to style two groups of li in a single line?

You are correct about <span> directly under a <ul> being invalid. Here's a few solutions:

Give float to the <li> element directly.

li{
display:inline;
float: left;
}
.right{
float:right;
direction:rtl;
}
<ul>
<li> item1</li>
<li> item2</li>
<li> item3</li>
<li class="right"> item4</li>
<li class="right"> item5</li>
<li class="right"> item6</li>
</ul>

how to align all my li on one line?

Try putting white-space:nowrap; in your <ul> style

edit: and use 'inline' rather than 'inline-block' as other have pointed out (and I forgot)

UL not staying in one single line

You could just float all the lis the to the left.

Actually, you are doing that.

Just set a width on the <div id="bottom_header"> so that it doesn't wrap.

For example:

#bottom_header{
background:#0F1923;
border-bottom:5px solid #0F67A1;
font-size:.95em;
font-weight:700;
height:31px;
padding:0 0 0 10px;
width:800px; /* ADD A WIDTH */
}

Example: http://jsfiddle.net/CtkrZ/

EDIT

As per your comment below:

edit: I set 100% width and didn't fix that (also it created an
annoying horizontal line at all times on the whole page)

Remove the width from the div and add it to the ul. Give the ul an overflow:hidden; too.

ul{
list-style:none;
overflow:hidden;
width:500px;
}

#bottom_header{
background:#0F1923;
border-bottom:5px solid #0F67A1;
font-size:.95em;
font-weight:700;
height:31px;
padding:0 0 0 10px;
}

Updated Example: http://jsfiddle.net/CtkrZ/1/

How to make a ul display in a horizontal row

List items are normally block elements. Turn them into inline elements via the display property.

In the code you gave, you need to use a context selector to make the display: inline property apply to the list items, instead of the list itself (applying display: inline to the overall list will have no effect):

#ul_top_hypers li {
display: inline;
}

Here is the working example:

#div_top_hypers {    background-color:#eeeeee;    display:inline;      }#ul_top_hypers li{    display: inline;}
<div id="div_top_hypers">    <ul id="ul_top_hypers">        <li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>        <li>‣ <a href="" class="a_top_hypers"> Compose</a></li>        <li>‣ <a href="" class="a_top_hypers"> Reports</a></li>        <li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>        <li>‣ <a href="" class="a_top_hypers"> logout</a></li>    </ul></div>

Place Each 2 elements of unordered list on a single line

You can do something like this, it will wrap last 2 items when screen size decreases.

.social_list {  display: flex;  flex-direction: column;  flex-wrap: wrap;}
.first,.second { display: flex; padding: 10px;}
.first li,.second li { margin: 15px;}
<a href="mailto:shouman882@gmail.com" class="footer_link">shouman882@gmail.com</a>
<ul class="social_list">
<div class="first">

<li class="social_list_item"> <a class="social_list_item_link" href="https://www.facebook.com/samtshouman"> <i class="fab fa-facebook"></i>Facebook </a> </li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://github.com/SamShouman"> <i class="fab fa-github">GitHub</i> </a> </li> </div>
<div class="second">
<li class="social_list_item"> <a class="social_list_item_link" href="https://instagram.com/sam_shmn98?igshid=1k437cycqmauk"> <i class="fab fa-instagram"></i> Instagram </a> </li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://api.whatsapp.com/send?phone=96103943517&source=&data=&app_absent="> <i class="fab fa-whatsapp"></i>Whatsapp </a> </li> </div>

</ul>

HTML/CSS: how to put all li in ul on the same line and centered

You can add following css rule.

 .gk-short-menu {text-align: center;}
.gk-short-menu li {
display: inline-block;
margin-right: 5px;
}
.gk-short-menu span {
display: block;
text-align: center;
}

That rule will make your content centered and in same single line ...

ul li style and keeping it inside one line

Use box-sizing: border-box on the li elements. This will make the padding part of the width calculation.

http://jsfiddle.net/ExplosionPIlls/GLh92/5/



Related Topics



Leave a reply



Submit