Not sure how to describe it. Why aren't the last two li floating correctly?
Site: http://symphonyninjas.com/interviews/
Add clear:left:
.photo-id.first, .first.interviewee {
margin-left: 0;
clear: left;
}
The LIs are all floating, but the images are different heights. The fifth image is hitting the third image and sitting next to it instead of underneath it.
Clear the float when you want to start a new row. You already have a class on that LI to remove the margin, simply add clear:left;
.photo-id.first, .first.interviewee {
[...]
clear: left;
}
Related
I am trying to left align a list inside a css grid. However, the text-align and setting the margins and padding don't seem to work. How can I left align the ul list. Codepen: https://codepen.io/centem/pen/oNvZLgP Thankyou.
ul {
list-style: none;
text-align: left;
}
li {
padding-left: 0;
margin-left: 0;
}
Use the below CSS
ul{
padding-left: 2%;
}
You can accordingly change the padding value depending upon the requirements.
Also if you want your list items completely aligned to the left, get rid of the following padding line under the .grid-page > div selector:
padding: 0px 20px;
To complete Not A Bot's answer (it's always good to know why something works), the reason behind your issue was the default padding of unordered lists.
UL Default CSS Values
These values are there to make lists look like written documents lists but obviously, that's not what we want in many cases.
Usually, margins and paddings of elements should be reset. In your case:
ul {
padding: 0;
}
should be enough, since you're already setting a padding for the container.
I've been searching on how to align items of a list, verticaly, in the right side of a div.
I tried float,
li {
float: right;
}
But it makes the two items be in the right side but not on top of another as I intended.
What I got on Fiddle, as you can see option1 and option2 are in the right side but not vertically aligned.
In your CSS for your li, also add clear:both;. This prevents other objects from being to either side of your li. I tried it in your fiddle, and it works nicely
See here
Basically you need to remove float: right; and add text-align:right to UL check out eh jsfiddle link i provided to see the solution
//remove
li {
float: right;
}
// and add
ul {
text-align:right;
}
http://jsfiddle.net/jspatel/F3XgY/
You can just add a :
line-height:98px;
to your li class
So it will center your text with the ul height
Here is the JSFiddle
Please see my jsfiddle example below.
Can anyone figure out what I am doing wrong here?
I am attempting to use a third party plugin called Smart Wizard it all works except for this one aspect as shown in the jsfiddle.
The [X] is on a new line, it should be directly to the right of the error message.
http://jsfiddle.net/jamesjw007/4wJv4/1/
just add
.content { width: 90%; float: left; }
example fiddle: http://jsfiddle.net/4wJv4/9/ - Adjust the width of content element as you prefer
Try adding this to the Stylesheet..
It worked..
.swMain .msgBox .close {
float: left;
}
You have to float all the elements to
the Left in the same tag to get the
elements to be in One line.
Just the "float" will do..
You need to float the content div as well as the close icon. In addition to this, you might want to float the close button to the right of the message box as opposed to immediately after the text.
.swMain .msgBox .content { float:left; width:auto; }
.swMain .msgBox .close { float: right; }
I've updated your fiddle with these changes - http://jsfiddle.net/4wJv4/19/
I have a html page where I have 3 anchors in an ordered list. the last two anchors need to be at the right of the page. I understand the better way to do this involves using nth-child selectors. I attempted to create 3 instances, one to specify each anchor and this failed. I could get one of the instances to the right of the page but not two. I tried, as you will see in my code, using '2n+1' but that also did not work.
I am a bit stuck and any advice would be greatly appreciated!
http://jsfiddle.net/MwT6d/
how about this:
http://jsfiddle.net/MwT6d/7/
Maybe this:
div.content ul li {
list-style-type: none;
clear: left;
}
[...]
div.content ul li a:nth-last-child(-n+2) {
float: right;
}
In this way you set to float: right just the last two children <a> of every <li>, and then you clear the float at every <li>.
http://jsfiddle.net/hr7uz/1/
In your case, to use the nth-child selector I would do the following.
div.content ul li a:nth-child(1) {
float: left;
}
div.content ul li a:nth-child(n+2) {
float: right;
}
div.content ul li{clear:right}
The rest of your CSS seems to work fine. I would then add some margins or padding to those links that were floated right and there you go.
Personally how I would do it I would set all the relevant links to float right, then set the first-child to float left. It's kind of like thinking about the problem backwards.
Might be a bit too early in the morning for me but I struggling to figure out what I've done wrong here.
I have a page with 9 boxes and I would like them to be positioned with 3 on one line, 3 on another and 3 on the other.
Have a look here: http://dev.tim-morgan.co.uk/other/Untitled-1.html
Right now you can see, the list bullets are showing and each box looks like it's going down like a staircase since I put in float: left;
Any ideas of what I'm doing wrong?
Thanks
You need to:
Move float: left from ul.tabs2 a to ul.tabs2 li.
Add overflow: hidden to .tabs2 to clear the floats.
Add clear: left to every 3n+1 li using :nth-child, try this:
ul.tabs2 li:nth-child(3n+1) {
clear: left
}
If you need to support Internet Explorer 8 and lower (no nth-child support), you can use http://selectivizr.com/, or just add the clear: left rule yourself to each relevant li.
You might want to remove the default styles on your <li>s, they could be interfering with the floating of the <a>s in the <li>s.
I’d suggest:
ul.tabs2 {
list-style: none;
}
ul.tabs2 li {
margin: 0;
padding: 0;
}
For getting three in a row, #thirydot’s answer looks good. If you know how wide you want each box to be, you could set that width on the <a>s, then set a width on the <ul>:
ul.tabs2 {
width: 300px;
}
ul.tabs2 li a {
width: 100px;
}
In your css add this
ul.tabs2 li {display:block;float:left;width:33%;margin:0 0 10px 0;padding:0;}
and also add overflow:hidden and list-style:none to your ul.tabs2 if you don't want bullets.