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 li
s 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
How to Set the Height of a Div Based on a Percentage-Based Width
Run CSS3 Animation Only Once (At Page Loading)
How to Match 3D Perspective of Real Photo and Object in CSS3 3D Transforms
Firefox @Font-Face with Local File - Downloadable Font: Download Failed
How to Get My CSS Linear Gradient to Work in Ie
Small Margin/Gap at the Top of Document
Css: Bottom-Border-Transition - Expand from Middle
Use Justify-Content: Flex-End and to Have Vertical Scrollbar
How to Remove the Hash from Compass's Generated Sprite Image Filenames
Shrinking Navigation Bar When Scrolling Down (Bootstrap3)
How to Remove Border from Specific Primefaces P:Panelgrid
Stopping a CSS Animation But Letting Its Current Iteration Finish
How to Use CSS Position Sticky to Keep a Sidebar Visible with Bootstrap 4
How to Have Different CSS When I Print or Print Preview
How to Collapse Unused Row in a CSS Grid