Long time reader, first time post :) Any good ideas for this? :
I have 4 <li> elements displaying as inline-block.
These elements each contain a mix of elements.
3 contain an <h3> and a <div>.
1 contains an <q>, a <strong> and a <a>.
My question: how can I vertically align the text of these elements without placing any restrictions on the amount of text within, or without knowing the amount of text within in advance? As the text length increases, shorter columns drop with the bottom of the <ul> when I want them to remain at the top!
the code and result can be viewed here:
http://jsfiddle.net/m6HG5/5/
Thanks!
Assuming I am understanding your question properly, you need to specify the line-height of your UL element:
<ul>
<li><h3>List Item 1</h3></li>
<li><strong>List Item 2</strong></li>
<li>List Item 3</li>
</ul>
And the styling:
ul {
line-height:1em;
}
li {
float:left;
vertical-align:middle;
padding:5px;
display:block;
}
h3 {
font-size:1.5em;
}
strong {
font-weight:bold;}
http://jsfiddle.net/m6HG5/3/
Related
Is there a way to display multiple li tags of HTML in a single line as shown below. Basically we need to display the first few li elements in a single line and rest in a list as shown below link. Thanks.
See CSS and positionning possibilities. You've to change regular comportements of li in layout (default one)by setting new rules. i.e.: using float CSS properties but they're many mny ways to set and place elements in the way you like in your page.
When using bootstrap you can even use grid predefine layout fitting what you want(so for example fill each grid cell with one li) but that seems more complex and make you write more i think.
Yes it is possible.
I created an example pen for you.
HTML
<ul>
<li>
<div>
<span>Item1</span>
<span>Item2</span>
<span>Item3</span>
<div>
</li>
<li>item 4</li>
</ul>
CSS
ul{
list-style-type:none;
display:flex;
justify-content:space-between;
flex-grow:1;
}
ul li{
display: inline-block;
}
Place your image files instead of the span tags. Make sure you add display:inline-block; property to them and give proper widths and heights to the image files.
The magic behind this is flexbox
I am creating a horizontal list. Here is my html:
<ul class="deals">
<li>test</li>
<li>fads</li>
<li>asdf</li>
</ul>
And here is the css:
ul.deals {
list-style-type: none;
}
ul.deals li {
display: inline;
padding: 10px 20px;
}
If I add a div inside of the list, then it does not show horizontally anymore. Here is the new html:
<ul class="deals">
<li>
<div>test</div>
</li>
<li>
<div>fads</div>
</li>
<li>
<div>asdf</div>
</li>
</ul>
What about the div changes the output? Also, how would I fix this?
As already mentioned, divs are block level elements.
What are you trying to achieve by nesting a div? If you don't need a dimensional container just use a <span> rather than using a <div> styled with display: inline. Reason: spans are inline by nature and won't need additional css to make them so.
If you want a dimensional container while still retaining your horizontal structure you can use either a <span> or <div> as long as you assign display: inline-block
Even better, style the list item itself with display: inline-block. That way you don't need the nested DOM element.
As gillesc said, DIV tags are block level. Try the following dubious code in your css
ul.deals div {display: inline}
You could possibly use inline-block instead
I have a bunch of unordered list elements that are stacked side by side with each other. To accomplish this, the style rule typically applied is:
#slide ul,li{
float:left;
list-style-type:none;
}
I need to introduce another unordered list of elements that behave the way the ul and li element typically do; that is stacked on top of each other but without any list-style-type, and to achieve this:
.stack ul,li{
list-style-type:none
}
The problem is that the styles of stack class for ul,li do not apply and the elements stack next to each other as they are being in the case of ul,li for #slide.
Check it out on this js fiddle:
http://jsfiddle.net/G7JHK/
Are my selectors wrong?
P.S: I have tried this out with class/id and various combination of both but the result is always the same.
Because of the comma in your selector you were applying float left to all li elements. Try something like this:
<ul class="stack">
<li>element 1</li>
<li>element 2</li>
</ul>
<br/>
<ul id="slide">
<li>element 3</li>
<li>element 4</li>
</ul>
#slide li{
display:inline;
}
This css will make all list elements in the div 'slide' display in a row and all other list elements will continue to display like normal. It saves you having to use two different classes :)
Your CSS should be like so
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
I think you want something like:
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
Look at the selectors. You want to select a ul with class stack (ul.stack) and find its child li.
There is problem of your selector. class or id of same element never separated by a white space. They should be with no space and the child are separated by a space but no ',' will not be used there..
So you can try this in your code
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
Also you have to place the HTML tag name first and then the preceding attribute.
The problem is that you selected the ul that is a descendent of slide, but your ul has an id of slide, so it doesnt work, because there is no ul that has a container with an id of slide. Also by putting ,li you are selecting all list items on the page. You want to have #slide li, which will only select the list items with a container id of slide. You don't need the #slide ul so your final code should be
#slide li {
float:left;
}
http://jsfiddle.net/G7JHK/6/
As an alternative, you could use ul:nth-of-type(2) instead of an id to save some space in the html
http://jsfiddle.net/G7JHK/7/
I have a list of names that I'm displaying in one cell of a table with a space between each. For formatting reasons I want to avoid putting each in its own table cell. I now want to put a small avatar or photo above each name. I can obviously do one person as <img src="photo.gif"><br>name... but using or obviously creates a vertical not horizontal list. I can no longer use spaces obviously.
Is there any horizontal version of a <br> tag that I could use to space out the people?
Alternatively, is there a way to do this with css? I found some references to placing images side by side using float left, however, the text is not in a tag. Using multiple span tags does not seem so appealing. Here is img code I found.
.left{
float:left;
margin:0;
padding:0;
}
Using the following CSS:
.horizontalList li {
display: inline;
margin-left: 10px;
margin-right: 10px;
}
You can make an element which usually displays as a block i.e. <LI> , <DIV> , etc to display inline. The margins are just added to give a little space between each element.
So for example,
<UL class="horizontalList">
<LI><img src="img1.png"/>Person 1</LI>
<LI><img src="img2.png"/>Person 2</LI>
<LI><img src="img3.png"/>Person 3</LI>
<LI><img src="img4.png"/>Person 4</LI>
</UL>
Just as well, you can alter the style of the images to display as a block rather than inline, so you can add this CSS to do that:
.horizontalList img {
display: block;
margin-bottom: 10px;
}
I have been trying to learn horizontal lists in html. I have the following code,
CSS:
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
HTML:
<div >
<ul id="list">
<li>Store </li>
<li>Mac </li>
<li>IPod </li>
<li>IPhone </li>
<li>IPad </li>
<li>ITunes </li>
<li>Support </li>
</ul>
</div>
When I put the id in the div tag (<div id="list">)then it does not show the list horizontally while the current code displays the list horizontally. I don't get the reason behind it. Please help me clear the concept. Thanks
Because a div is not a list element. It has no list-style-type, so it won't change the bullets on any lists within the div. And an 'inline' display type does not propagate down the DOM tree from a parent node, so the inline applies only to the div itself and won't affect the list or li elements.
It works just fine if you put the ID on the div element as well.
Have a look at this fiddle: http://jsfiddle.net/sKaYm/
Your CSS selector #list li says "apply this to any list element that is child of an element with ID 'list' - no matter if it is an immediate child or not." - So basically it doesn't matter how many levels of div's or other elements you wrap around your list, it will still select it.
According to this jsFiddle it works.
list-style-type only changes the marker in front of the item.
to create cross browser horizontal list add float left to each list item :
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
float:left;
}