i just wrote some lines of code here. I want <span> texts to display below these <h1> but if i edit css <h1> or <span> to " display: block " then the parent element <li> will display as block too.
<ul>
<li><h1>Big Number</h1><span>Description</span></li>
<li><h1>Big Number</h1><span>Description</span></li>
<li><h1>Big Number</h1><span>Description</span></li>
</ul>
This is the style:
ul li {
display: inline;
}
h1 {
display: inline;
}
span {
display: inline;
}
How can I make the <li> display inline and the <span> texts display below <h1> ?
An inline box can't cleanly contain a block box.
Use display: inline-block instead of inline.
Use this way:
ul li {display: inline-block;}
h1 {display: inline-block;}
span {display: block;}
Try this SAMPLE
ul li {
display: inline-block;
}
h1 {
display: inline;
}
span {
display: block;
}
You just have to use the inline-block property on the ul li selector.
ul li { display: inline-block }
jsfiddle.net is not working right now so I can't make an example for you. You're also gonna have to delete the h1 and span style.
An example on CodePen
http://codepen.io/Tudes/pen/dyFDL
The reason why you have to use only the inline-block property on the ul li selector is because h1 is a block element that means it is gonna take the full width of the div and the span will go right underneath it.
Related
I have a ul list and would like to hide all the text that is not inside an anchor. This is markup from a CMS so I can't add in additional selectors...
<ul class="list">
<li class="sub">
link not linked
</li>
</ul>
I have tried using the following css but it doesn't work.
.list .sub:not(a) {
display: none;
}
Why doesn't this work?
Jsfiddle: http://jsfiddle.net/9tg0g44e/
.sub:not(a) matches any element with the class .sub if it's not an a element.
Since the .sub here is a li, it's not an a, so that hides the li and all its contents.
Normally, to select any children of .sub that aren't a elements, you'd use .sub > :not(a) instead, but since the other text is a direct sibling of the a element you won't be able to target it with a selector.
Instead of using display: none, you can use the visibility property instead:
.list .sub {
visibility: hidden;
}
.list .sub a {
visibility: visible;
}
But note that this will also hide the bullet because it's part of the li element and cannot be targeted separately. If you need the bullet to be shown, you can replace it with a :before pseudo-element, which works slightly differently from an actual list marker:
.list .sub {
list-style: none;
visibility: hidden;
}
.list .sub:before, .list .sub a {
visibility: visible;
}
.list .sub:before {
content: '\2022';
}
I have a horizontal list in my markup with the following CSS:
ul li {
display: inline;
list-style: circle;
list-style-type: circle;
}
When I remove the display: inline; it works fine. But I can't get it to work on the horizontal one.
The list decorators will only be displayed if you don't override the display type for the list item. Rather than setting display: inline, apply a float: left and give some margin to prevent the circles from colliding into the previous element.
ul li {
float: left;
margin-left: 30px;
list-style: circle;
list-style-type: circle;
}
Here is an example.
ul li {
float: left;
margin-left: 30px;
list-style: circle;
list-style-type: circle;
}
/* this bit is optional, it only removes the left padding from the first item */
ul li:nth-of-type(1) {
margin-left: 0;
}
<ul>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
<li> item 4 </li>
</ul>
well, if you do that it won't shw because you're basically declaring "stop displaying the element in its default display method list-item and use inline instead" . To learn more about display methods, please take a look do DISPLAY PROPERTY.
Now, if you want to have bullets AND still display it inline, there are many ways to do it. You can use a :before pseudo-selector, you can use a background, etc.
For example:
ul li {
display: inline;
}
ul li:before {
content: "• ";
}
or
ul li{
display: inline-block;
}
ul li{
padding-left:30px; background:url(images/bullet.png) no-repeat 0 50% ;
}
but as long as you "kill" the list-item display method, you'll need to find some ways to override the DOM display of list types
Instead of inline, use:
li {
float:left
}
or
li {
display:inline-block
}
Here is the code : http://jsfiddle.net/o3omng/hrh1s7ss/
When I use float : left to li tags,
li tags go out of div whose class is na_cate.
Please Maintain li tags in center of na_cate,
and make those li tags left aligned.
Set text-align: center; to div.na_cate ul and display: inline-block; to div.na_cate ul li
TRY - DEMO
You could do this:
.na_cate ul {
list-style: none ;
text-align: center;
}
.na_cate ul li {
display: inline-block;
}
You need to clear the float of your container.
.na_cate li {
float:left;
margin-left:20px;
}
.na_cate ul {
list-style:none;
overflow:hidden; /* clearfix */
}
Alternatively, here is another clearfix that doesn't use overflow but pseudo elements instead.
I have a simple html code that has some data but the li has image background and on hover i want to show the data from span.
HTML CODE:
<ul class="container">
<li class="icons_27"><span class="data_27">DATA 27 - TORONTO</span></li>
<li class="icons_28"><span class="data_28">DATA 28 - NEW YORK</span></li>
</ul>
CSS:
.container li span {
display: none;
}
.container li span:hover {
display: block;
}
My question is how can i show the span data on hover ?
you need to style the hover on li
.container li:hover span {
display: block;
}
but this will work only if your li is visible even when the inner span has display: none
(otherwise your li have no a visible area in which you can hover).
You may solve this potential issue defining, for example, a width or an height to your list-items.
Or — instead of giving display: none to the inner span — you may use a different style, e.g.
.container li span {
visibility: hidden; /* or also opacity : 0; */
}
.container li:hover span {
visibility: visible; /* or also opacity : 1; */
}
Note: the opacity approach (instead of display or visibility) would also give you the opportunity to make a graceful appearing/disappearing effect using a CSS3 transition
If you want the span to display when the li is hovered, put the :hover selector on the li instead:
.container li span {
display: none;
}
.container li:hover span {
display: block;
}
Demo at http://jsfiddle.net/D3QNr/
I have a list of items of which only the first is visible and on list hover shows all items with side effect of changing the position of surrounding content. How to evade this unwanted effect?
Here is an example list:
http://jsfiddle.net/dsbonev/z8Sjy/
All examples that I checked for styling menus have a two-level structure (parent -> children). On parent hover children are shown. But I don't have a parent to hover onto nor I want to promote one of the children as a parent by moving it out of the list and thus breaking the semantic of the markup.
Figured it out! This is what I wanted:
http://jsfiddle.net/z8Sjy/
I accept comments with shortcomings or improvements of this method.
HTML
<div class="list-wrapper">
<ul class="items">
<li>stackoverflow</li>
<li>superuser</li>
<li>serverfault</li>
</ul>
</div>
CSS
.list-wrapper, .items {
display: inline-block;
}
.list-wrapper {
position: relative;
background-color: blue;
height: 1em;
}
.items {
position: absolute;
background-color: red;
}
.items > li:not(:first-child) {
display: none;
}
.items:hover > li:not(:first-child) {
display: block;
}
You could position the list absolutely and then add padding to the paragraph to compensate.
http://jsfiddle.net/z8Sjy/2/
Instead of using display: none & display: block use visibility: hidden & visibility: visible. That way they take up the space in the HTML document, but are not shown:
Working example: http://jsfiddle.net/z8Sjy/3/
Edit
The following CSS would be more cross-browser compatable for showing / hiding "not first-child" elements as the selector :not is actually CSS3.
.items > li:first-child ~ li {
display: none;
}
.items:hover > li:first-child ~ li {
display: block;
}