I would like to put a line break into an inline list to produce this result:
However when I put a line break into my basic list, this is the result I get:
How would I make it so that I can put a br within the li element only without, messing up the horizontal list itself.
li {
list-style-type: none;
display: inline;
}
<ul>
<li>Hello</li>
<li>Bonjour</li>
<li>Longer<br>text</li>
<li>Aloha</li>
</ul>
Use display: inline-block; instead:
li {
list-style-type: none;
display: inline-block;
}
<ul>
<li>Hello</li>
<li>Bonjour</li>
<li>Longer<br>text</li>
<li>Aloha</li>
</ul>
Instead of styling the li with
display:inline;
You could achieve the desired effect by
float:left;
Use display: inline-block
Here is working snippet
ul{
list-style:none;
}
ul li{
padding:20px;
display:inline-block;
}
<ul>
<li>Hello</li>
<li>Bonjour</li>
<li>Longer<br>text</li>
<li>Aloha</li>
</ul>
Related
So i have two Divs like this:
<div id="first_content">
<ul>
<li>This</li>
<li>text</li>
<li>should</li>
<li>be</li>
<li>displayed</li>
<li>in</li>
<li>one</li>
<li>line</li>
</ul>
</div>
<div id="second_content">
<ul>
<li>This</li>
<li>text</li>
<li>should</li>
<li>be</li>
<li>displayed</li>
<li>in</li>
<li>one</li>
<li>line</li>
</ul>
</div>
And CSS:
#first_content, #second_content ul {
list-style: none;
}
#first_content, #second_content ul li {
display: inline;
}
It doesn't work (at least on firefox 34). Style applies only to one ID.
When i remove one of these ID selectors, another one works fine.
I guess it should work? what's wrong?
try:
#first_content ul, #second_content ul {
list-style: none;
}
#first_content ul li, #second_content ul li {
display: inline;
}
if you are trying to select the ul's and li's of both containers you need to specify this with both selectors.
Basic CSS
.foo, .bar { ... }
are two separate selector chains. You have:
#first-content, #second_content ul
^--- applies to <div id="first-content">
^^^^^^^^^^--- applies to any <ul> inside <div id="second-content">
<div> tags do not have a list-style, so your first rule doesn't do anything for the first <div> set. For your other rule set, display-inline will apply to the parent div for first-content, and to the <li> tags in the second-content area.
Here is some css:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
And some HTML:
<div id="navcontainer">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
These should produce the desired effect. Source: http://css.maxdesign.com.au/listutorial/horizontal_master.htm
Multiple id concatenation has never worked in Firefox. For example, I am using 67.0 (64-bit) and the following CSS works as intended:
#noDisplay {
display: none;
}
#togForm {
display: none;
}
...but if I concatenate that, as shown below, it does not work (one id working, the other not working), and this has always been the case.
#noDisplay,#togForm {
display: none;
}
I know that sometimes the reason is because of conflicting entries, but display: none on its own? - Argue with that if you can!
I do not know if this is possible, but I'm trying to indent the <li> in red to wrap underneath itself with CSS. I've used text-indent, padding, margin, and cannot get it to work. The <li> in red seems to be set at the same x/y coordinate as the green text. It only lets me push it away from the time (in green).
I can use a table, but I'm trying to accomplish this with CSS.
The image above is where I am at. The image below is what I am after.
HTML
<div class="agendaList">
<ul>
<li>Day, Month Date</li>
<ul>
<li>0:00 am</li>
<li>This is where the event description will appear. I would like for it to wrap under itself and not under the time. How do I start the wrap at the first word in the first sentence (This) of this <li>.</li>
</ul>
</ul>
<ul>
<li>Day, Month Date</li>
<ul>
<li>0:00 am</li>
<li>This is where the event description will appear. I would like for it to wrap under itself and not under the time. How do I start the wrap at the first word in the first sentence (This) of this <li>.</li>
</ul>
</ul>
</div>
CSS
.agendaList ul ul {
list-style: disc;
/* list-style-image: url(bullet.gif); */
margin-left: 0;
padding-left: 0;
}
.agendaList ul ul li {
display: inline;
list-style: none;
color: green;
}
.agendaList ul ul li:last-child {
display: inline;
color: red;
list-style-position: inside;
padding: 10px 0 10px 20px;
text-indent: -1em;
}
Here are two options:
Absolutely position the first li element and then use a margin to add space to the second list item.
Example Here
.agendaList ul ul li:first-child {
position: absolute;
}
.agendaList ul ul li:last-child {
display: inline-block;
color: red;
list-style-position: inside;
margin-left: 65px;
}
Alternatively, a better option would be to set the display of both li elements to table-cell. Add white-space:nowrap to the first li in order to prevent the text from wrapping.
Example Here
.agendaList ul ul li {
display:table-cell;
list-style:none;
color:green;
}
.agendaList ul ul li:first-child {
white-space:nowrap;
}
.agendaList ul ul li:last-child {
color: red;
list-style-position: inside;
padding-left:20px;
}
I'm creating a page where I have two vertical menus that each have a header, and then directly underneath navigation type links.
I'm using an UL for the two headers, and would like to use sub UL for the rest of each menu. I'm having a problem where the sub UL takes on the properties of the parent and is displyaing inline instead of vertically. Also, the submenu links are indenting instead of positioning directly under the headers. I'm still fairly new at CSS, so if I'm going about this incorrectly, I really appreciate any advice. Thanks for your help
#Contentmenu ul {
margin: 0;
padding: 40px;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {
display: inline;
padding:10px;
float: left;
}
#contentmenu a {
display:block;
padding:10px;
width:200px;
color:#ffffff;
font-size:26px;
background-color:#c7daff;
}
#Contentsubmenu ul {
margin: 0;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {
display:block;
floa:left;
}
#contentsubmenu a {
display:block;
width:200px;
color:#000000;
font-size:20px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
HTML
<div id="contentmenu">
<ul>
<li>Header 1
<div id="contentsubmenu">
<ul>
<li>Article 1</li>
<li><a href="#" Article 2</a></li>
</ul>
</div>
</li>
<li>Articl3</li>
</ul>
if you want to only target the top-level , you would use this:
#contentmenu > ul
and
#contentmenu > ul > li
Also, CSS is case-sensitive, so make sure you are using #contentmenu
Does this fix your other issue as well?
Your CSS code is wrong at the element #contentsubmenu li. You use floa: left;, which is a incorrect CSS code. Additionally, just use float: none; on this element instead of float: left; and it will work as desired.
Demo on JSFiddle
Therefore that you are new in CSS:
Try to write clean code with correct indentations.
I've written the folloning code:
<ul>
<li>Text</li>
<li>text</li>
</ul>
and styles:
list-style-type: none;
padding: 5px;
display: inline;
background-color: #A9A9A9;
But i have spacing between two li elements like the following:
How can I remove this spacing?
By put them inline
<ul>
<li>Text</li><li>text</li>
</ul>
Js Fiddle Demo
If you float your li items, it should remove the margin between li output.
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
ul {
list-style-type: none;
}
ul li {
float:left;
padding: 5px;
display: block;
background-color: #A9A9A9;
}
Here are two common ways to avoid the space:
<ul>
<li>
one</li><li> <!-- use this to avoid the linebreak -->
two</li><li>
three</li>
</ul>
Or you can use Comments:
<ul>
<li>one</li><!--
--><li>two</li><!-- Comments so there is no white-space
--><li>three</li>
</ul>
You can check it in this Demo
You get the space because there is some space between the elements.
(Tabs, Newline count as space ). With this Minimized HTML it should work :)
You can read more about it here Examples at CSS-Tricks
try floats and use list-style-type for ul:
ul {
list-style-type: none;
}
li {
padding: 5px;
float:left;
background-color: #A9A9A9;
}
Just Add float:left in your Css
ul li {
background-color: #A9A9A9;
display: inline;
float: left;
padding: 5px;
}
Demo
There are many ways as mentioned above few of them..however you can achieve with another method. using font-size:0
ul
{font-size:0; /*This will remove the space totally*/
list-style-type: none;
}
li{
padding: 5px;
display: inline;
background-color: #A9A9A9;
font-size:16px; /*This is important line so the font come again in same shape*/
}
Here is the Demo.
I have a a breadcrumb in my subheader however the active breadcrumb appears underneath the list. I would like it so that they are both in the same line.
HTML:
<div id="breadcrumb">
<ul>
<li>Home ></li>
<li class="active">Marketing Items</li> </ul> </div>
CSS:
#breadcrumb {
font-size:11px;
background-color:#F2F2F2;
}
#breadcrumb ul {
margin:0px;
margin-bottom:0px;
margin-left:4px;
list-style: none;
background-color:#F2F2F2;
}
#breadcrumb .active {
color:#B3B3B3;
}
Here is also the jsfiddle: http://jsfiddle.net/4nRPY/
Use float:left or display: inline-block. But, with float left you have to clear the element right after that.
#breadcrumb ul li{
float: left;
}
Use display: inline-block; on your <li> tags
#breadcrumb ul li {
display: inline-block;
}
DEMO: http://jsfiddle.net/4nRPY/2/
You can this way to chive to that
li{float:left;}
Demo http://jsfiddle.net/4nRPY/3/
I prefer a pseudo element:
JSFiddle
HTML
<div id="breadcrumb">
<ul>
<li>Home</li>
<li class="active">Marketing Items</li>
</ul>
</div>
CSS
#breadcrumb ul li:after {
content:">";
padding:0 0.5em;
}
#breadcrumb ul li:last-child:after {
content:"";
padding:0;
}
Slighty less browser support but no extraneous HTML mark-up and you can change it throughout your site by changing one CSS property.