I have an unordered list that contains links. Some of the links are text and some are text with icons. But I have a problem in that I can't get them to line up. Can someone suggest what I am doing wrong here. I have tried different combinations but still can't get things to line up.
Here is my HTML code. Note that I used an icon from another site. I can't link to my own site as its internal.
<div id="ftr_top_ctr" class="btn_lnk">
<ul class="left">
<li><a class="disabled" id="doCheckMark" rel="nofollow">Mark</a></li>
<li><a href="/aa" ><img class='ico' src="http://michaelwright.me/images/test.png" /></a></li>
<li><a href="/aa" ><img class='ico' src="http://michaelwright.me/images/test.png" />Test</a></li>
</ul>
</div>
div#ftr_top {
height: 30px;
}
.btn_lnk ul.left {
padding: 0 0 0 10px;
}
.btn_lnk ul {
margin: 0;
}
.btn_lnk {
font-size: 12px;
}
.btn_lnk ul li {
display: inline;
float: left;
padding: 0;
position: relative;
}
#ftr_top_ctr a {
border: 1px solid;
border-radius: 3px 3px 3px 3px;
padding: 3px 4px;
}
a {
text-decoration: none;
}
You can see the code and what it displays: fiddle
Add vertical-align: top to the imgs.
http://jsfiddle.net/thirtydot/86ZEf/4/
This problem was happening because the default vertical-align is baseline, see here for more information.
Add float:left; to #ftr_top_ctr a and give it a line-height:16px;. Add a rule for the icon: #ftr_top_ctr a img {float:left;}. Fiddle.
Try this: http://jsfiddle.net/86ZEf/8/
Instead of adding a border to the a elements, add it to the li elements and set a height on the li elements too. Lastly, remove the "float", set "li" to inline and you're good to go. Relevant snippet:
.btn_lnk ul li {
display: inline;
height: 22px;
border: 1px solid;
border-radius: 3px 3px 3px 3px;
padding: 3px 4px;
}
Here is the updated css in its entirity:
.btn_lnk ul.left {
padding: 0 0 0 10px;
}
.btn_lnk ul {
margin: 0;
}
.btn_lnk {
font-size: 12px;
}
.btn_lnk ul li {
display: inline;
height: 22px;
border: 1px solid;
border-radius: 3px 3px 3px 3px;
padding: 3px 4px;
}
a {
text-decoration: none;
}
img {
vertical-align: top
}
Related
i need the borders of my list to appear like this on the screen, Im not able to put the white spacing between the border-bottom and the border-right.
This is my code: https://jsfiddle.net/w1n72hkx/3/
HTML:
<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>
CSS:
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
border-color: DarkTurquoise;
}
.barraDatosSociales li {
display: inline;
padding-right: 5px;
border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
border-right: solid;
border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
padding-left: 5px;
}
Here i attach an image of how it should look like:
Just apply a bottom and top margin to your li elements and set their display to inline-block in order to make the margin matter.
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
padding: 0 5px;
border-color: DarkTurquoise;
}
.barraDatosSociales li {
padding-right: 5px;
/*Here' what changed*/
display: inline-block;
margin: 5px 0;
border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
border-right: solid;
border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
padding-left: 5px;
}
<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>
There are many ways to separate the internal borders:
you could move up list-items with a negative top value, e.g.
.barraDatosSociales li {
display: inline;
padding-right: 5px;
position: relative;
top: -2px;
}
or you could add a padding-bottom to the outer container
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
padding-bottom: 2px;
border-color: DarkTurquoise;
}
You need a little modification in the css for the list-items.
Inline elements do not accept top/bottom padding and margins. So try using display: inline-block
.barraDatosSociales li {
display: inline-block;
padding: 5px 15px;
}
Is it possible to make a capsule shape using border-radius without a set width or height and include between delimeter?
Yes, You can try this way
.container {
width: 90%;
padding:20px;
margin: 10px auto;
background:#000;
}
ul {
list-style: none;
padding: 7px;
background: #333;
border-radius: 12px;
display: inline-flex;
}
li {
padding: 0 10px;
border-right: 1px solid #999;
line-height: 1;
color: #999;
font-size: 12px;
display: inline-block;
vertical-align: middle;
}
li:last-child {
border-right: none;
}
<div class="container">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</div>
Here is my fiddle: http://jsfiddle.net/58kvpdpv
Hi, please help me with the idea for active menu have border-bottom override on navigation border-bottom. I tried but the active element always under the line, not override. Any suggestion is a big help.
ul {
list-style-type: none;
padding-left: 0;
margin: 0;
border-bottom: 5px solid #ccc; <----- MAIN LINE FOR WHOLE MENU
}
ul>li.active {
border-bottom: 5px solid #555; <----- I WANT THIS OVERRIDE ON THE LINE
}
By adding a negative margin at your bottom (-5px) because your border is 5px thick you would solve this problem: jsfiddle
body, html {
margin: 0;
padding: 0;
}
header {
background-color: #eee;
}
ul {
list-style-type: none;
padding-left: 0;
margin: 0;
border-bottom: 5px solid #ccc;
}
ul>li {
display: inline-block;
padding: 0 15px 0 15px;
margin-left: -4px;
}
ul>li:first-child {
margin-left: 0;
}
ul>li>a {
display: block;
color: #333;
text-decoration: none;
padding: 5px 0 5px 0;
}
ul>li.active {
border-bottom: 5px solid #555;
margin-bottom: -5px
}
<header>
<nav>
<ul>
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
My navigation bar currently is scrunching all my text together. I have "headers" for the dropdown list, and the headers aren't forcing a line.
The HTML looks like this:
<li><p>Services</p><ul>
<li id="ITServices"><p>IT Services</p></li>
<li>Portals, Collaboration & Workflows</li>
<li>Business Intelligence & Dashboards</li>
<li>Mobile Development</li>
<li>Custom Application Development</li>
<li id="healthcare"><p>Healthcare Services</p></li>
<li>EMR, ICD 10 and Healthcare Consulting</li>
</ul></li>
CSS looks like this:
#healthcare p {
width: 280px;
margin-left: 0px;
padding: 0px;
display: inline;
}
#ITServices p {
width: 280px;
margin-left: 0px;
padding: 0px;
display: inline;
}
.navbar li:hover ul {
left: 15px;
top: 40px;
background: #7FBA00;
padding: 1px;
width: 280px;
border: none;
text-align: left;
}
.navbar li:hover ul a {
margin: -7px -10px -7px -15px;
text-align: left;
padding: 0px 0px 0px 10px;
display: block;
font-size: 11px;
width: 259px;
line-height: 25px;
color: #000;
background-color: #F0F0F0;
text-decoration: none;
border-left: 10px solid #7FBA00;
border-bottom: 1px solid transparent;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
}
.navbar li:hover ul a:hover {
background: #7FBA00;
border-left: solid 10px #fff;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
width: 260px;
}
Ahhh! Right? I'm trying to get it to all display in a list with basically line breaks after each li element. Help?
Basically a rule is over-riding your style. display property called block makes an element to behave like a block element, thus covering full line.
Your use might be the following, so try this
li > ul li { display: block; }
Hello :) Is it possible to have bottom border in the center (without using pictures). Something like separator between list items which doesn't go from edge to edge?
Thanks
You can do that with two elements easily, here's a demo http://jsfiddle.net/slash197/JbFrN/6/
Not directly. But if it's OK to insert additional elements just for the sake of the border then you can make these elements less wide than your "proper" list items to achieve the desired effect.
See an example.
Old post, but I was wondering how to do this effect on a day of 2017
I did it with pseudo element ::after and display: inherit
li::after {
content: '';
display: inherit;
width: 50%;
margin: 10px auto;
border-top: 1px solid #DFDFDF;
}
I know it's an old question but I found this thread using google.
It can also be accomplished with :after
div:after {
content: '.';
display: block;
height: 1px;
width: 200px;
margin: 0px auto;
text-indent: -9999px;
border-top: 1px solid #585858;
}
Demo
<div class="dropDown">
<ul class="ddMenu">
<li>ONe</li>
<li>Two</li>
<li class="last">Three</li>
</ul>
</div>
.dropDown {
background-color: #F6F6F2;
border: 1px solid #D6DAC4;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
margin-top: -1px;
padding: 10px;
width: 110px;
}
ul, ol {
list-style: none outside none;
margin: 0;
padding: 0;
}
ul.ddMenu li {
border-bottom: 1px solid #E9EADE;
box-shadow: 0 1px #FFFFFF;
display: list-item;
line-height: 2.3;
}
ul.ddMenu li a {
display: block;
padding: 4px 10px;
}
<h1 class="center underlined">
<span>My title</span>
<h1>
h1 {
&.center.underlined {
display: flex;
align-items: center;
justify-content: center;
span {
border-bottom: 3px solid;
}
}
}