I'm trying to create a horizontal (no line breaks) unordered list of images on my website using code as follows:
<ul class="ImageSet">
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
</ul>
In my CSS, I'm using the following rules:
.ImageSet { white-space: nowrap; }
.ImageSet li { display: inline; float: left; height: 100% }
This is working properly in Chrome, but not in Firefox, for some reason does anyone know why?
EDIT: To clarify, the problem in FF is that the li's still wrap. I'm trying to make them all appear in a single, unbroken horizontal line going off the rightmost edge of the page.
Try removing float:left as display:inline should suffice
When you float li's they will wrap when they reach the end of their parent container (which could be the body tag). If you are wanting the image to disappear out of the screen you will need to set the width of the parent container (the ul) and use overflow hidden or auto to get your desired effect.
Related
So I read the solutions regarding making the spacing go away when using inline-block as opposed to floats: display: inline-block extra margin and http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
So if you're using haml and want to put the closing tag on the same line as the next opening tag, is there is a solution besides switching to ERB?
(and no, I don't want to mess with a css property of the parent container and have to override that in all the child elements).
This breaks (has spacing between the anchors).
So is it true that in spite of the recommendations to do such layouts using inline-block as opposed to floats, it seems that floats are still the way to go, especially when using haml?
CSS
nav a {
display: inline-block;
padding: 5px;
background: red;
}
HTML
<nav>
One
Two
Three
</nav>
Workaround (css-tricks one):
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
another one:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
I found the answer: http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_
(this is a super useful article on the topic: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)
Here's a codepen to experiment: http://cdpn.io/Bjblr
And this worked:
Here's the html if the anchor text is on the same line (same result, but harder to read source html:
I am using the <ul><li> list tag within which I have 3 tags like sos:
<ul id="reg-lists" >
<li class="one">
<select>...</select>
</li>
<li class="two">
<select>...</select>
</li>
<li class="three">
<select>...</select>
</li>
</ul>
I have the proper css to make the list horizontal:
#the-form li {
display:inline !important;
list-style-type: none;
padding-right: 10px;
}
I does'nt seem to work though and am not sure why. Horizontal rule seems to apply well until you put the combos. Would appreciate your help. Thanks
It works fine for me -- see this JSFiddle -- the list items are displayed horizontally, at least they are when I look at it in Firefox.
If you're seeing something else in another browser, please let us know.
If this is case, the solution may be to use display:inline-block instead of display:inline.
inline-block is similar to inline, but allows the element to contain block type elements, which are not allowed by the normal display:inline style.
Hope that helps.
You need to give your <ul> a set width which is equal to the width of all the combined <li>'s and then set your <li>'s to float:left;
I have organized a menu. Its HTML is as follows:
<ul class="topmenu">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<ul>
This is a horizontal menu, so I have floated the list items to left to appear them in a horizontal line. I could have used display:inline to appear them in a single line, but since IE does not support it and I don't know any other way to do so, I used float:left;.
It's css is:
.topmenu {
list-style:none;
margin:0;
padding:0;
}
.topmenu li {
float:left;
}
This brings the menu in a perfect horizontal line, but the entire list is floated to the left. I want to bring the .topmenu to appear in the center of the document and keep the listitem inside it floated towards the left.
I found that this is achievable by defining width property of the .topmenu, but I dont want to fix its width as the list-items are dynamically generated and thus could increase and decrease.
Any one know of any solution?
Here is the solution without using width:)
display: inline is supported fine by all versions of IE. It's inline-block that isn't supported completely in IE 6 and 7 (source).
This should be solvable by simply switching to display: inline.
Could you help me fix the menu on this this page? The menu list items don't have a width defined, so they display at 100% width in IE7. If I make the span.right have a float: left, it fixes the problem, but then the rounded corners don't work. A possible solution might be to get rid of the right span and set a padding and background image to the anchor, but that will: a) prevent me from being able use to a background image on the anchor (for this instance, I suppose a solid color will do) and b) require that I break menu.png into separate image files.
If you guys have any good suggestions, let me know. Thanks!
If you move the actual text to the middle, between <span class="left"></span> and <span class="right"></span>, and encompass it in <span> tags:
<li><a href="#">
<span class="left"></span>
<span>Home</span>
<span class="right"></span>
</a></li>
You can then add the CSS rule:
#menu ul li a span
{
float: left;
}
Then remove float: left; from span.left and span.right. This should work fine on both Firefox and IE 7, and I'm assuming most other browsers too. Of course, this will only work if you're OK with restructuring the HTML a little.
I have a simple list I am using for a horizontal menu:
<ul>
<h1>Menu</h1>
<li>
Home
</li>
<li>
Forum
</li>
</ul>
When I add a background color to the selected class, only the text gets the color, I want it to stretch the entire distance of the section.
Hope this makes sense.
The a element is an inline element, meaning it only applies to the text it encloses. If you want the background color to stretch across horizontally, apply the selected class to a block level element. Applying the class to the li element should work fine.
Alternatively, you could add this to the selected class' CSS:
display: block;
Which will make the a element display like a block element.
Everyone is correct that your problem is that anchors are inline elements, but I thought it is also worth mentioning that you have an H1 inside of your list as well. The H1 isn't allowed there and should be pulled out of the UL or placed into an LI tag.
Would something like this work?
.selected {
display: block;
width: 100%;
background: #BEBEBE;
}
Put the selected class on the <li> and not the <a>
<a> elements are inline by default. This means that they don't establish their own block, they are just part of the text. You want them to establish their own block, so you should use a { display: block; } with an appropriate context. This also enables you to add padding to the <a> elements rather than the <li> elements, making their clickable area larger, and thus easier to use.