I have a ul with two columns (of lis). I'm trying to make a visible separation between the two columns, but I can't get it to work. The goal is to make each li have a bottom-color line, but make those lines separated.
This is what I currently have: http://codepen.io/anon/pen/JeluB
HTML
<ul id="double">
<li>asdas</li>
<li>eee</li>
<li>iii</li>
<li>qqqq</li>
<li>yyyy</li>
<li>pppp</li>
<li>p222</li>
</ul>
CSS
ul{
width:200px;
overflow: hidden;
border: 1px solid red;
padding: 5px;
}
li{
line-height: 1.5em;
float: left;
display: inline;
border-bottom: 1px solid #DDDDDD;
border-right: 2px;
}
#double li {
width: 45%;
}
One solution is to apply border-right using :nth-child(odd):
ul {
width: 200px;
overflow: hidden;
border: 1px solid red;
padding: 5px;
}
li {
line-height: 1.5em;
float: left;
display: inline;
border-bottom: 1px solid #DDDDDD;
border-right: 2px;
}
#double li {
width: 45%;
}
#double li:nth-child(odd) {
border-right: solid 1px #DDDDDD;
}
#double li:nth-child(even) {
margin-left: 5px;
}
<ul id="double">
<li>asdas</li>
<li>eee</li>
<li>iii</li>
<li>qqqq</li>
<li>yyyy</li>
<li>pppp</li>
<li>p222</li>
</ul>
I think you simply need to give the li elements a margin.
For example
li {
...
margin: 0 5px;
...
}
just add margin-left and margin rigth in li element
it may be works. http://jsfiddle.net/vrajeshdave148/t89yvepj/3/
the property column-gap resolves it.
I have added the odd and even classes to the li tags
and I have added the float:right CSS rule to the li tags with even class
and I have added the float:left CSS rule to the li tags with odd class
and I have added a border-bottom to each of the li.even and li.odd separatly
here is I've achieved
ul{
width:200px;
overflow: hidden;
border: 1px solid red;
padding: 5px;
}
li{
line-height: 1.5em;
float: left;
display: inline;
}
#double li {
width:45%;
}
li.odd {border-bottom:3px solid #ccc;float:left;}
li.even {border-bottom:3px solid #ccc;float:right;}
<ul id="double">
<li class="odd">asdas</li>
<li class="even">eee</li>
<li class="odd">iii</li>
<li class="even">qqqq</li>
<li class="odd">yyyy</li>
<li class="even">pppp</li>
<li class="odd">p222</li>
</ul>
Related
.pagination-box ul{
display: flex;
justify-content: space-between;
}
.pagination-box ul li{
list-style: none;
text-align: center;
display: inline-block;
}
.pagination-box ul li:not(:first-child):not(:last-child){
border :1px solid #cfcfcf;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 9px;
}
.pagination-box ul li.active{
border:2px solid #ff9805;
}
<div class="row pagination-box hidden-xs">
<ul>
<li>
<a>
<img ng-click="gotoPrev()" class="prev left-arrow" src="img/left_arrow.svg">
</a>
</li>
<li class="active">01</li>
<li class="">02</li>
<li class="">03</li>
<li class="">04</li>
<li class="">05</li>
<li class="">06</li>
<li>
<a>
<img ng-click="gotoNext()" class="next right-arrow" src="img/right_arrow.svg">
</a>
</li>
</ul>
</div>
which looks like:
in the .active class I have specified a border property, but it is not working. However if I write color:red; or any other CSS property, it is working.
In chrome, when I inspect the element, it shows it like this:
I am not sure, why?
.pagination-box ul li:not(:first-child):not(:last-child)
This selector overrides your .pagination-box ul li.active (more specificity).
Soulution:
.pagination-box ul li.active {
border:2px solid #ff9805 !important;
}
or:
.pagination-box ul li {
border-radius: 50%;
width: 40px;
height: 40px;
padding: 9px;
}
.pagination-box ul li:not(:first-child):not(:last-child):not(.active) {
border: 1px solid #cfcfcf;
}
.pagination-box ul li.active {
border: 2px solid #ff9805;
}
or:
.pagination-box ul li.active:not(:first-child):not(:last-child) {
border:2px solid #ff9805;
}
Its because the property is overrides by the property you applied for all li (i.e)
.pagination-box ul li:not(:first-child):not(:last-child) {
border: 1px solid #cfcfcf;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 9px;
}
You can overcome by specifying like this
.pagination-box ul li.active {
border: 2px solid red !important;
}
Here is the jsFiddle
Hope it works :)
Your styles get overridden by the :not() so you need to add !important to your active class
.pagination-box ul li.active{
border:2px solid #ff9805 !important;
}
https://jsfiddle.net/xrw38xjz/
your declaration
:not(:first-child):not(:last-child)
is more specific than
.acitve
And css is using more specific declarations first. Here is some tutorial how this is count: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You may enter !important as someone already propose:
.pagination-box ul li.active{
border:2px solid #ff9805 !important;
}
or specify the not attributes:
.pagination-box ul li:not(:first-child):not(:last-child).active{
border:2px solid #ff9805;
}
so your active declaration will be more important
If ever you do not want to use the !important, you can also extend the :not specificity with your additional .active class like this
.pagination-box ul li.active:not(:first-child):not(:last-child){
border:2px solid #ff9805;
}
I'm wanting my ul to be in the center of my div however this will work. The code keeps going to the left of the webpage even though I have tried to center it. I have tried a couple of different solutions and to no avail. Here is my code:
HTML:
<div id="nav">
<ul class="links">
<!--PHP code will return menu set in <li> and <a> tags-->
<?php include "setMenu.php";?>
</ul>
</div>
CSS:
#nav {
border: 1px black solid;
}
#nav ul{
display: block-inline;
margin: 0px auto;
}
#nav li {
float: left;
padding: 5px 5%;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
border-radius: 3px;
position: center;
border: 1px black solid;
}
#nav li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
Try this:
#nav ul{
width: 40%;
margin: 0 auto;
}
or
#nav ul{
display: table;
margin: 0 auto;
}
http://jsfiddle.net/4tnwjrag/2/
Example:
#nav {
border: 1px black solid;
background:green;
}
#nav ul{
display: table;
margin: 0 auto;
margin: 0px auto;
background:blue;
margin:0 auto;
padding:0;
}
#nav li {
padding: 5px 5%;
display:table-cell;
width:120px;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
list-style:none;
border-radius: 3px;
position: center;
border: 1px black solid;
}
#nav li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
<div id="nav">
<ul class="links">
<!--PHP code will return menu set in <li> and <a> tags-->
<li>zz</li>
<li>zz</li>
<li>zz</li>
</ul>
</div>
display: block-inline; should be display: inline-block;.
There's no block-inline value for display. Here is a list of available values for that CSS property.
Use text-align center on your div and set padding to 0 on the ul like this:
#nav {
border: 1px black solid;
text-align:center;
}
#nav ul{
display: block-inline;
margin: 0px auto;
padding:0;
}
Here's a link to a similar question: How to horizontally align ul to center of div?
I chose to go with solution #2 and applied it to your elements, where
#nav {
text-align: center;
}
#nav ul {
display: inline-block;
}
and here is a jsfiddle of the solution applied to your particular case: http://jsfiddle.net/7qd5bkse/
I had to make a few tweeks to make it look like yours, but I hope this helps and should be a good start.
Here's another solution
#nav {
border: 1px black solid;
text-align: center
}
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li a {
text-decoration: none;
display: block;
color: white
}
#nav li {
float: left;
padding: 5px;
margin-right: 5px;
background-color: grey;
border-radius: 3px;
border: 1px black solid;
width: 100px;
text-align: center
}
#nav li:hover {
background-color: white;
}
#nav li a:hover {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="nav">
<ul class="links">
<li>Menu One
</li>
<li>Menu Two
</li>
<li>Menu Three
</li>
</ul>
</div>
</body>
</html>
I am developing website and I have a problem,
<li> elements aren't inside <ul>
#category_select {
margin: 0 auto;
width: 97%;
height: 50%;
list-style: none;
text-align: center;
border: 1px solid black;
}
#category_select li {
display: inline;
padding: 10px;
border: 1px solid black;
}
<ul id="category_select">
<li>Naslovnica</li>
<li>Elektronika</li>
<li>Bijela tehnika</li>
<li>Vozila</li>
<li>Sport</li>
<li>Dom i vrt</li>
<li>Odjeća i obuća</li>
<li>Moda</li>
<li>Literatura</li>
<li>Ručni radovi</li>
<li>Igračke</li>
<li>O nama</li>
<li>Kontakt</li>
</ul>
Please try this
#category_select li {
display: inline-block; //change display:inline to display:inline-block
padding:10px;
border:1px solid black;
}
DEMO
I'm trying to have these small left and right borders either side of the text. Here is what I'm trying to make:
http://imgur.com/xCZnGgJ
My problem is that the borders are not the same height of the surrounding div however they only go the same height of the text. Here is a screen shot:
http://imgur.com/I2jjsAm
I have dried adding height: 30px to the li and ul however this does not change anything.
*{margin:0;}
#header {
width:100%;
}
#pre_header {
width:100%;
height:30px;
background-color:#202020;
}
.pre_header_content {
margin:0 auto;
width:1040px;
}
#pre_header ul {
list-style-type: none;
margin: 0;
padding: 0;
line-height:30px;
}
#pre_header li {
display: inline;
border-right: .5px solid #414141;
border-left: .5px solid #414141;
}
#pre_header a {
text-decoration:none;
color:#fff;
padding:6px 15px 6px 15px;
}
#pre_header a:hover {
background-color:#4e4e4e;
}
<div id="header">
<div id="pre_header">
<div class="pre_header_content">
<ul>
<li>Voucher codes</li>
<li>In-store codes</li>
<li>Online codes</li>
<li>Free samples</li>
<li>Advertise</li>
</ul>
</div>
</div>
<div id="main_header">
<div class="main_header_content">
Test
</div>
</div>
</div>
If anyone knows is there also anyway to bring the two borders together closer also?
Add the padding:6px 15px 6px 15px; to the li instead of a. And also, 0.5px does not work. What's half a pixel? Updated your code. See below!
EDIT: Note: I also changed your hover effect to affect the li element instead of a.
*{
margin:0;
box-sizing: border-box;
}
#header {
width:100%;
}
#pre_header {
width:100%;
height:30px;
background-color:#202020;
}
.pre_header_content {
margin:0 auto;
width:1040px;
}
#pre_header ul {
list-style-type: none;
margin: 0;
padding: 0;
line-height:30px;
}
#pre_header li {
display: inline;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
padding: 0 15px;
float:left;
margin-right: 2px;
}
#pre_header li:last-child{
margin-right: 0;
}
#pre_header a {
text-decoration:none;
color:#fff;
}
#pre_header li:hover {
background-color:#4e4e4e;
}
<div id="header">
<div id="pre_header">
<div class="pre_header_content">
<ul>
<li>Voucher codes</li>
<li>In-store codes</li>
<li>Online codes</li>
<li>Free samples</li>
<li>Advertise</li>
</ul>
</div>
</div>
<div id="main_header">
<div class="main_header_content">
Test
</div>
</div>
</div>
You could simply change the li to display: inline-block; I've created a jsfiddle for you.
#pre_header li {
display: inline-block;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
}
Also, don't use .5px, use a single amount. I have used 1px.
http://jsfiddle.net/xeqsn83a/
If you want the borders to touch, you would need to float it. And as others have mentioned, your border width needs to be an actual pixel size. There is no such thing as .5px. Here is an example of what (I think) you are trying to do:
http://jsfiddle.net/tuc4Lwuu/
#pre_header li {
float: left;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
margin-right: 2px;
}
Try this:
* {
margin: 0;
}
#header {
width: 100%;
}
#pre_header {
width: 100%;
height: 30px;
background-color: #202020;
}
.pre_header_content {
margin: 0 auto;
width: 1040px;
}
#pre_header ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 0;
}
#pre_header li {
display: inline-block;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
margin-right: 1px;
}
#pre_header a {
text-decoration: none;
color: #fff;
padding: 6px 15px 6px 15px;
font-size: 16px;
line-height: 30px;
}
#pre_header a:hover {
background-color: #4e4e4e;
}
<div id="header">
<div id="pre_header">
<div class="pre_header_content">
<ul>
<li>Voucher codes</li>
<li>In-store codes</li>
<li>Online codes</li>
<li>Free samples</li>
<li>Advertise</li>
</ul>
</div>
</div>
<div id="main_header">
<div class="main_header_content">
Test
</div>
</div>
</div>
I changed display: inline to inline-block for li and border-width to 1px (it has to be an integer). Also made li items closer to each other with font-size: 0 technique (read this article for understanding).
I want to add a bottom border to every list item with css. Here is my CSS code:
ul,ol{
li{
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 3px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #eeeeee;
ul,ol{
margin-left: 2em;
li{
border-bottom: 1px solid #eeeeee;
}
}
}
}
It gives an output like this:
Screenshot url: http://oi34.tinypic.com/ih1eea.jpg
The css code is working fine on top level item. But not on the sublists. Please see the screenshot and help me, Thanks in advance.
Demo
Give a class to your ul say demo
.demo li {
border-bottom: 1px solid #000;
}
If you want each and every li in your website should get border-bottom which won't be a great idea than use
ul li {
border-bottom: 1px solid #000;
}
If you want to indent your nested li you can use text
The syntax you have posted in the question is wrong. (you cannot do nesting in CSS rules)
The equivalent correct syntax is
li{
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 3px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #eeeeee;
}
li ul,
li ol{
margin-left: 2em;
}
i'm not sure i understund you very well, but there is simple code for You:
HTML
<div>
<ul class="list-1">
<li class="item-1">Item 1
<ul class="list-1-1">
<li>Item 1-1</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
CSS
ul.list-1 li.item-1, ol.list-1 li.item-1 {
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 3px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #eeeeee;
}
ul.list-1 li.item-1 ul.list-1-1 , ol.list-1 li.item-1 ul.list-1-1 {
margin-left: 2em;
}
ul.list-1-1 li {
border-bottom: 1px solid #eeeeee;
}
DEMO
http://jsfiddle.net/jVcFb/1/