This question already has an answer here:
Avoid an element to be split into two columns while using column-count
(1 answer)
Closed 3 years ago.
.main{
column-count: 2;
}
.main .list{
background: #ccc;
padding: 10px;
list-style-type: none;
}
.main .list:hover{
background: #11e;
}
<ul class="main">
<li class="list">list-item-1</li>
<li class="list">list-item-2</li>
<li class="list">list-item-3</li>
<li class="list">list-item-4</li>
<li class="list">list-item-5</li>
<li class="list">list-item-6</li>
<li class="list">list-item-7</li>
</ul>
When I hover on the list-item-4 I can see the hover color covers some section on the second column as well. How can fix it?
You can use break-inside: avoid; to prevent the experienced behaviour.
You do not need to use vendor prefixes as usage of break-inside is already supported by more than 99% of the browsers according to caniuse.com
Please have a look at my JSFiddle to see it working.
Related
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
How are the points in CSS specificity calculated
(7 answers)
Closed 1 year ago.
I am making a simple navigation menu and I want my last list item (search box) to the extreme right of navigation bar.
.nav-list li {
float: left;
margin: 10px 15px;
}
.nav-list .search-box {
float: right;
}
<nav>
<ul class="nav-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li class="search-box">
Search: <input type="text" name="search" id="search">
</li>
</ul>
</nav>
This is working fine. But when I am trying to target last list item with just the search-box class like
.search-box {
float: right
}
it is not floating to the right.
Can anyone please explain why it is not working ?
Edit: It is also working fine if I target the last item via Id.
Like
#search-box {
float: right
}
This is because of specificity coming into play. Consider the following rules, the list item <li class="search-box" id="search-box"> matches all of them:
.nav-list li { float: left; } /* 2 */
.nav-list .search-box { float: right; } /* 3 */
.search-box { float: right; } /* 1 */
#search-box { float: right; } /* 4 */
li.search-box { float: right; } /* 2 */
When there are multiple matches for same property (float in this case), the rule with highest specificity wins1. I have numbered the rules based on soecifity; higher means having more weight.
1 In case of a tie, the rule appearing last in source order wins.
If you look at the computed styles tree in dev tools you see that .nav-list li is overriding .search-box as a selector. It simply comes down to selector specificity.
This is a common occurrence with CSS and your selector is appropriate. Avoid using !important whenever possible, as it makes future work more difficult.
I want to show you different solution for the reason of correct styling and using modern techniques.
float is not intended for styling purpose. Its only for floating images within a text paragraph. It was a mis-used hack and unfortuantly still is tought.
The modern solution is the use of flexbox like in the sample below. Give the last item simply a margin-left: auto; and the amrgin will occupy the remaining space and as such move the last element to the very right side.
nav ul {
display: flex;
}
nav ul li {
margin: 10px 15px;
}
nav ul li:last-of-type {
margin-left: auto;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>
Search: <input type="text" name="search" id="search">
</li>
</ul>
</nav>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 5 years ago.
So I have a situation, where I have a list of elements like these:
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="b">4</li>
<li class="b">5</li>
<li class="a">6</li>
<li class="a">7</li>
Now what I want to achieve is to use CSS queries to apply red background to the first and last occurrence of a. So in the example above: 1, 3, 6, 7 will have the background color red.
How can this be achieved using css? I have tried using css siblings queries but I can't find a way to determine when the switch from a -> b happens.
.a:nth-child(1) {
background: red none repeat scroll 0 0;
}
.a:nth-child(3) {
background: red none repeat scroll 0 0;
}
.a:nth-child(6) {
background: red none repeat scroll 0 0;
}
.a:nth-child(7) {
background: red none repeat scroll 0 0;
}
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="b">4</li>
<li class="b">5</li>
<li class="a">6</li>
<li class="a">7</li>
you just need to change no which one you want to be make red background
.a:nth-child(no will come here ) {
background: red none repeat scroll 0 0;
}
As i understand from your question you need to apply background color red on every occurance first and last child elements. for this please refer the following css code.
.a:nth-child(2n+1), .a:nth-last-child(2) {
background: red;}
I'm trying to build an equal horizontal menu in CSS which is still supported in older browsers like IE9. (Yes, I know....)
Been testing in FF and Chrome with newer CSS3 techniques and working excellent! Tried in IE9, as we still need to support it.... and failed.
I searched around, and found some of these links which did the trick...
http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
horizontal menu with auto width and same dimension of the tabs
...However if the number of menu items change you need to either change you CSS or cater for X number of menu items with multiple declarations...
Is there a simple one case covers all that will support IE9 and still be compatible with newer browsers without affecting them? (ie: special stylesheet for IE9)
Thanks.
If I understood your question correctly, you could make use of display: table and display: cell, as in:
.menu {
display: table;
padding: 0;
width: 100%;
}
.menu-item {
display: table-cell;
list-style: none;
margin: 0;
}
<ul class="menu">
<li class="menu-item">Option 1</li>
<li class="menu-item">Option 2</li>
<li class="menu-item">Option 3</li>
<li class="menu-item">Option 4</li>
</ul>
This question already has answers here:
A space between inline-block list items [duplicate]
(8 answers)
Closed 7 years ago.
I'm trying to cover the top of my site with list items.
My list items are appearing like this:
And i don't know why this separation between them. They don't have any margin and padding.
Anyone knows why is this?
HTML:
<ul class="listras-lista">
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
</ul>
CSS:
.listras-lista {
list-style: none;
width: 100%;
}
.listras-lista_item {
display: inline-block;
background: #CC00CC;
width: 20%;
height: 5px;
padding: 0;
}
It's whitespace that causes the spaces. If you can, change the markup so that </li><li> are together
This is caused by display: inline-block;. Change it to float:left;.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to fit a div’s height to wrap around its floated children
I want to have a <ul> inside of a <div> with a bunch of floated <li>. Only problem is that the containing <div> collapses to be 0px tall. How do I make the <div> keep its height as if it contained the <li>?
HTML:
<div>
<ul>
<li>stuff</li>
<li>morestuff</li>
</ul>
</div>
CSS:
div {
background: rgb(90, 90, 90);
}
ul {
color: red;
}
li {
float: left;
clear: none;
margin-right: 10px;
}
If using floats is old-fashioned and you know a better style, let me know!
Option 1 (recommended): Give the div style overflow:hidden; which will correct its height.
Option 2: Alternatively add a clearer div to the end of your current div
<div>
<ul>
<li>stuff</li>
<li>morestuff</li>
</ul>
<div style="clear:both;"> </div>
</div>
jsFiddle Demo
Edit: To clarify, both of the above have complete cross browser support and require no hacks or invalid CSS.
Try Display:inline-block;
li {
display:inline-block;
margin-right: 10px;
}
Demo
Cross Browser Inline-Block
To fix your exact problem:
div {
background: rgb(90, 90, 90);
overflow: auto;
}
Maybe a less "old-fashioned" method:
div {
background: rgb(90, 90, 90);
}
ul {
color: red;
}
li {
display: inline-block;
*vertical-align : auto;
*display: inline; // targets IE7 and such, same effect
margin-right: 10px;
}
You will need to adjust your margin-right on the li element to match your exact specs. It's still cool to use floats, but why bother when display: inline-block will solve most of what you want???
PS: Sometimes IE hacks are ok -- I suggest using a preprocessor like Sass with a library like Compass to help you manage them.
A couple articles on the issue:
http://www.vanseodesign.com/css/inline-blocks/
http://www.onderhond.com/blog/inline-block-vs-float
Whenever you are using FLOAT property don't forgot to add clear property also
you can try this
<div>
<ul>
<li>stuff</li>
<li>morestuff</li>
<li style="clear:both;float:none"></li> <!-- Added Clear, removed float -->
</ul>
</div>