Right now this displays as: text 1 2 3 4 with the list appearing horizontally inline with the text. Is there a way to make the list display vertically while still remaining inline with the text? (instead of text 1 2 3 4, the 2 should appear below the 1, 3 below the two, etc. but the list will still appear to the right of "text" and in the same line as "text")
Any help is appreciated. Thanks!
HTML
<div id = "text">text</div>
<ul id="ulist">
<li id="contents">1</li>
<li id="contents">2</li>
<li id="contents">3</li>
<li id="contents">4</li>
</ul>
CSS
#ulist {
display: inline-block;
margin: 0;
padding: 0;
}
#contents {
display: inline-block;
}
#text {
display: inline;
}
#text2 {
display: inline;
}
Sure, get rid of your rules and just float the div to the left:
#text {
float:left;
}
Note that IDs must be unique.
jsFiddle example
Add display:block; to your li elements, modify #text to display:inline-block and vertical-align: top, and that should cause them to stack.
#ulist {
display: inline-block;
margin: 0;
padding: 0;
}
#ulist li {
display: block;
}
#contents {
display: inline-block;
}
#text {
display:inline-block;
vertical-align:top;
}
#text2 {
display: inline;
}
Related
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 4 years ago.
<ul class="cls">
<li>Flowering tree</li>
<li>Fruits bearing</li>
<li>Roadside tree</li>
<li>Medicinal</li>
</ul>
<p>paragraph</p>
This is my code to add navigation button to the document. The contents of css document for "cls" class are:
p{
text-align:justify;
position:relative;
}
.img{
float:right;
padding:0 0 20px 30px;
}
ul.cls{
list-style-type:none;
}
ul.cls li{
float:left;
}
ul.cls li a{
display:block;
padding:16px;
background-color:#1F618D;
color:#B2BABB;
text-decoration:none;
}
p {
text-align: justify;
position: relative;
}
.img {
float: right;
padding: 0 0 20px 30px;
}
ul.cls {
list-style-type: none;
}
ul.cls li {
float: left;
}
ul.cls li a {
display: block;
padding: 16px;
background-color: #1F618D;
color: #B2BABB;
text-decoration: none;
}
<ul class="cls">
<li>Flowering tree</li>
<li>Fruits bearing</li>
<li>Roadside tree</li>
<li>Medicinal</li>
</ul>
<p>paragraph</p>
Why does “p” element after “ul” not start in a new line? The contents of the paragraph continue in the same line as navigation.
I did an example for you:
p {
text-align: justify;
position: relative;
background: red;
}
ul.cls {
list-style-type: none;
display: flex; /*Make it a flex container*/
flex-direction: row; /*all flex items on row*/
}
ul.cls li {
/*removed float:left;*/
}
ul.cls li a {
padding: 16px;
background-color: #1F618D;
color: #B2BABB;
text-decoration: none;
}
<ul class="cls">
<li>Flowering tree</li>
<li>Fruits bearing</li>
<li>Roadside tree</li>
<li>Medicinal</li>
</ul>
<p>paragraph</p>
float often destroys the natural flow of the elements. I suggest you get yourself into some flexbox here. That's a good alternative and pretty easy to understand and use too.
Greets.
EDIT: Oh and here's a little CodePen to play with. :)
The problem you are specifically facing, is that when you float elements, they are removed from the document flow, though they are still considered part of the document as compared to absolute positioning.
I won't get into exactly why this happens, but one way to fix this is by using a clearfix type css class; this class adds in an invisible element using the :after(browser compatability) pseudo-selector after the element to which the class is supplied.
Clear-fixes are explained in greater detail in this answer, where the below class was borrowed from.
p {
text-align: justify;
position: relative;
}
.img {
float: right;
padding: 0 0 20px 30px;
}
ul.cls {
list-style-type: none;
}
ul.cls li {
float: left;
}
ul.cls li a {
display: block;
padding: 16px;
background-color: #1F618D;
color: #B2BABB;
text-decoration: none;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
<ul class="cls clearfix">
<li>Flowering tree</li>
<li>Fruits bearing</li>
<li>Roadside tree</li>
<li>Medicinal</li>
</ul>
<p>paragraph</p>
Of course, you can always use Flex Box, as noted in the D.Schaller's answer to this question, however, remember that flexbox isn't always supported in older browsers, so if you use Flexbox, make sure to also account for which browser versions you are officially supporting.
How to set equal padding between elements set with display: flex and justified-content?
ul {
background-color: #ddd;
list-style-type: none;
padding: 0;
display: flex;
justify-content: space-around;
}
li.active a {
background-color: #111;
color: #fff;
}
<ul>
<li>Apples</li>
<li class="active">Bananas</li>
<li>Coconut</li>
<li>Apples</li>
<li>Kale</li>
<li>Coconut</li>
<li>Kale</li>
<li>Kale</li>
<li>Coconut</li>
<li>Kale</li>
</ul>
Bootply example
It is about background-color of active link. I would like to have something like in this image:
STEP 1
Allow for an equal distribution of free space among all list items and center the text (as in the image).
Add this to your CSS:
li { flex: 1; text-align: center; }
STEP 2
Enable the anchor element (a) to extend the full width of its container (so the entire li is clickable).
Add this to your CSS:
li a { display: block; }
Revised Demo
I have an unordered list with list-style-type:none to which I manually added bullets using :before.
The problem here is that if a paragraph inside one of the <li>s gets long enough to wrap around, the width of the paragraph itself will be too long to fit behind the bullet and so it gets pushed to a new line:
ul {
list-style-type: none;
padding: 0;
}
li {
padding:0 0 0 .5em;
}
li:before {
content:"- ";
position:relative;
vertical-align: top;
}
li > p {
display:inline-block;
margin:0;
/*max-width:calc(100% - 2em);*/
}
<ul>
<li><p>Looks normal</p></li>
<li><p>Looks normal with a<br>line break too.</p></li>
<li><p>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</p></li>
</ul>
http://jsfiddle.net/1xaamone/
As you can see in my example, I already have a workaround, but I wonder if there's a solution that works without calc() to improve browser compatibility even further.
Set white-space: nowrap on the parent li element and then reset that by setting white-space: normal on the child p element:
Updated Example
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 0 .5em;
white-space: nowrap;
}
li::before {
content: "- ";
position: relative;
vertical-align: top;
}
li > p {
display: inline-block;
margin: 0;
white-space: normal;
}
<ul>
<li><p>Looks normal</p></li>
<li><p>Looks normal with a<br>line break too.</p></li>
<li><p>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</p></li>
</ul>
Alternatively, you could also absolutely position the pseudo element relative to the parent li element and then displace it with padding.
Updated Example
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 0 .5em;
position: relative;
}
li::before {
content: "- ";
position: absolute;
top: 0;
left: 0;
}
li > p {
display: inline-block;
margin: 0;
}
<ul>
<li><p>Looks normal</p></li>
<li><p>Looks normal with a<br>line break too.</p></li>
<li><p>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</p></li>
</ul>
Simply removing the <p> tags also works.
Example
<ul>
<li>Looks normal</li>
<li>Looks normal with a<br>line break too.</li>
<li>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</li>
ul {
list-style-type: none;
padding: 0;
}
li {
padding:0 0 0 .5em;
}
li:before {
content:"- ";
position:relative;
vertical-align: top;
}
li > p {
display:inline-block;
margin:0;
/*max-width:calc(100% - 2em);*/
}
I'm trying to hide the overflow text of li and my li looks like this
<li class="food_item">
<a href="#" class="food_name" title="test">
testtesttesttesttesttesttesttesttest
</a>
<span>(12)</span>
</li>
<li class="food_item">
a short one
<span>(12)</span>
</li>
and my css
.food_category>.food_item {
width: 25%;
float: left;
line-height: 30px;
}
.food_category .food_name {
font-size: 14px;
margin: 0px 4px 0px 0px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width: 80%;
display: inline-block;
}
food_category is the class name of the ul tag, now the effect is below:
the span and the a tag are not in the same line, I assume it's about the inline-block property of the a, but if I remove that, the text-overflow will not work and the overflow text will not be hidden. I'm stuck here, can anybody help me? how can I make the a and span show in the same line while keeping overflow text hidden?
Update
this is the jsfiddle link, btw,I didn't set the css of span. What I want is to make the span text right behind the a tag like this testest... (12).Thx!
In regards to your update, you need to set the anchor tag and span tag to be vertically aligned at the top of the list element. Add the following to your CSS:
.food_item a,
.food_item span {
vertical-align: top;
}
This produces the desired behavior.
DEMO
You can do something like:
.food_item span {
display: inline-block;
float:left;
}
and add float:left; to .food_item .food_name
.food_item .food_name {
font-size: 14px;
margin: 0px 4px 0px 0px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width: 60%;
display: inline-block;
float:left;
}
FIDDLE
You may need to update the margin/padding for the spacing of the span.
I would also recommend adding something like clearfix on each li element to prevent float issues:
<li class="food_item clearfix">
...
</li>
<li class="food_item clearfix">
...
</li>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
I have a list with bullets. I made the bullets smaller by putting the li text inside a span and making the font-size of the li smaller than that of the span. The problem is that now the bullets are not vertically aligned in relation to the text. How do I fix that?
jsFiddle: http://jsfiddle.net/tXzcA/
li {
font-size: 15px;
}
li span {
font-size: 25px;
}
<ul>
<li><span>text1</span></li>
<li><span>text2</span></li>
<li><span>text3</span></li>
<li><span>text4</span></li>
</ul>
You could just make your own bullet point and make it whatever size you want.
li{
font-size: 15px;
list-style-type:none;
}
li span{
font-size: 25px;
}
ul li:before {
content: "•";
font-size: 80%;
padding-right: 10px;
}
Just change around the font-size to the size you want.
jsFiddle
Try this:
li span{
font-size: 25px;
vertical-align:middle;
padding-bottom:5px;
}
See it here: http://jsfiddle.net/tXzcA/19/
This is what I used, it centers on both the bullet & the content
Jsfiddle: http://jsfiddle.net/VR2hP/14/
CSS:
ul {
padding-left: 5em;
list-style: none;
}
li.twitter::before,
li.fb::before {
font-family: 'FontAwesome';
margin: 0 .2em 0 -1.5em;
font-size: 3em;
vertical-align: middle;
}
li.twitter::before {
content: '\f081';
}
li.fb::before {
content: '\f082';
}
li {
list-style-type: none;
}
li span {
display: inline-block;
vertical-align: middle;
}
Use an unordered list and display the list items as tables.
Take a look at this example: https://jsfiddle.net/luenib/jw1ua38v/
The icon, number, or whatever you want to place is going to be located inside a span. The content of the span is centered horizontally and vertically, very useful if you don't want to display your icon on the top. The text inside the paragraph will keep a space to its left, so it won't go under the icon in case the text extends in more than one line.
CSS:
ul {
padding-left: 0;
}
li {
display: table;
}
li span {
width: 40px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<ul>
<li><span>1</span>
<p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
</li>
<li><span>2</span>
<p>Some text here. Some text here. Some text here.</p>
</li>
</ul>