I have a ul list which has a few single and some multi-line li text..
Now for the multi-line text, the 2nd line of text starts at a different indentation than the 1st line of text.
I want a very basic approach to fix this issue which should be cross-browser compatible.
Just to add, I want some space between the ul and a neighboring image (so kind of margin)
My HTML and CSS;
<div class="fl">
<div class="resDtp2"><img src="images/book1.gif"></div>
<ul class="resDtp2 txtSmall">
<li class="resDtpPad"><span>Some text Some text Some text</span></li>
<li class="resDtpPad"><span>Some text</span></li>
</ul>
</div>
div.resDtp1{float:none}
div.resDtp2{float:left}
ul li.resDtpPad{text-align: left;}
You can give the li's a padding-left, that should do it
Related
I'm new to this. I'm writing an email template using HTML. I'm not sure if CSS is supported, but I know everything has to be inline. I have one line of space between my paragraphs, using <br />. I also have a ul element, and I want the same spacing between the list items.
When I use <br />, I end up with two lines of space. From reading other questions, I'm thinking I need to use span style or div style to change the bottom margin or line height, but I don't know what that should look like exactly.
You can do this by set line-height property to your ul element like this.
<p>First line of text <br/> <br/> Second line of text</p>
<ul style="line-height:2em">
<li>First li element</li>
<li>Second li element</li>
<li>Third li element</li>
</ul>
Because the editor can't support CSS and even auto-deletes some HTML things, my eventual work-around was to create three separate lists.
<ul>
<li><span style="font-family:Lucida Sans Unicode,Lucida Grande,sans-serif"><span style="font-size:12pt">Text of first list item.</span></span></li>
</ul>
<ul>
<li><span style="font-family:Lucida Sans Unicode,Lucida Grande,sans-serif"><span style="font-size:12pt">Text of second list item.</span></span></li>
</ul>
<ul>
<li><span style="font-family:Lucida Sans Unicode,Lucida Grande,sans-serif"><span style="font-size:12pt">Text of third list item.</span></span></li>
</ul>
I have a <ul> with a couple of <li>. In my css with li { display: inline; } I put the li elements in a horizontal order. The li elements contain a picutre and text. But now the picture and the text are also in horizontal order, but I want them to be under neeth each other. How can I do that?
<ul>
<li>
<img src="img/a.png" />
A
</li>
<li>
<img src="img/b.png" />
B
</li>
<li>
<img src="img/c.png"/>
C
</li>
</ul>
You will need to change your CSS as follows:
li {
display: inline-block;
}
li img {
display: block;
}
Here is a quick demo: http://codepen.io/anon/pen/VLLoEZ
This is not a bug but a normal behaviour. <img> tag is by default inline. You could solve this non-issue by either wrapping either your image or, better, your text into a block element. For example, a <p>tag for your text :
<ul>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
</ul>
jsFiddle
Note I use display:inline-block on li elements, taking advantage of both inline (putting things side-by-side, alignment,...) and block (fixed size, top/bottom margins) properties. Although it has a strange but easilly fixed "feature/issue", this is most of the time the best way to put elements side-by-side. display: inline or floating elements are also used but come with some other issues sometimes a bit trickier to be fixed.
I want to add space before bullet points . My requirement like
This is paragraph1
The text line one
The text line two
This is paragraph 2
The text line one
The text line two
Any help will be appreciated.
Try setting margin to li
li{
margin-left: 20px;
}
JSfiddle here
There is spacing before bullet points by default. If there isn’t, you are probably using a “Reset CSS” of some kind.
To set the spacing to a desired value, set padding-left and margin-left of both ul and li elements to zero and then set one of them to the desired value.
CSS:
li {
margin-left:1em;
}
You can set CSS to li as per your requirement.
HTML Code
<p>This is my paragraph1</p>
<ul><li> List One </li>
<li> List Two </li>
<li> List Three </li>
</ul>
<p>This is my paragraph 2</p>
<ul><li> List One </li>
<li> List Two </li>
<li> List Three </li>
</ul>
CSS
li {
margin-left:1em;
}
JSFiddel
apply margin-left to ul
Working Fiddle example is here:
Code:
[http://jsfiddle.net/Sharan_thethy/MNaUn/][1]
I hope this will help you
So, I have the following HTML structure:
<div id="category-filter">
<div class="column full">
<ul class="float-clear" id="category-filter">
<li>All Categories</li>
<li>Educator Workshops</li>
<li>Exhibitions</li>
<li>Family Activities</li>
<li>Films</li>
<li>Lectures + Gallery Talks</li>
<li>Music</li>
<li>Other Activities</li>
<li>Tours</li>
<li>Workshops</li>
</ul>
</div>
</div>
Which, after styling produces the following in Firefox:
However, in Webkit, the link text wraps:
The LI tags are floated left and should grow with the size of anchor inside them and then wrap as needed inside the container which has a width set. Any ideas why the links are wrapping in Webkit?
Add white-space:nowrap; to the links to avoid break line.
And <ul> element must only contain <li>.
It's guesswork without seeing your CSS, but try this:
#category-filter a {
white-space: nowrap
}
That should stop the text from wrapping.
And as already mentioned, it's invalid to have a div as a direct child of a ul. You should change it to <li class="column full">. You might also have to adjust some of the selectors in your CSS.
Given the following markup:
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
</ul>
Both the uls and the lis widths appear to be 100%. If I apply a background-color to the list item, the highlight stretches the full width of the page.
I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the lis (or perhaps the uls) width to the width of the widest item?
Adding ul {float: left; } style will force your list into preferred width, which is what you want.
Problem is, you should make sure next element goes below the list, as it did before. Clearing should take care of that.
Can you do it like this?
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
Exactly as BoltBait said, wrap your text in an inline element, such as span and give that the class.
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
My extra 2 cents is that if you don't have access to change the HTML, you can do it using Javascript. In jQuery:
$('li.highlight').wrapInner("<span></span>");
and use the CSS:
li.highlight span { background-color: #f0f; }
edit: after re-reading your question, can you clarify: do you want the highlight to only go as wide as the element which is highlighted, or as wide as the widest element in the list? eg:
- short
- items ********************
- here
- and then a really long one
...where the asterisks represent the highlighting. If so, then buti-oxa's answer is the easiest way. just be careful with clearing your floats.
Adding style="float: left;" to ul will cause the ul to only stretch as wide as the widest item. However, the next element will be placed to the right of it. Adding style="clear: left;" to the next element will place the next element after the ul.
Try it out
See documentation on float and clear.
The best way of going about solving this without messing up the style of your existing layout, is by wrapping the ul and li in a div with display: inline-block
<div id='dropdown_tab' style='display: inline-block'>dropdown
<ul id='dropdown_menu' style='display: none'>
<li>optoin 1</li>
<li>optoin 2</li>
<li id='option_3'>optoin 3
<ul id='dropdown_menu2' style='display: none'>
<li>second 1</li>
<li>second 2</li>
<li>second 3</li>
</ul>
</li>
</ul>
</div>
None of the existing answers provide the correct solution, unfortunately. They range from abusing the float property to totally restructuring your HTML, something which often isn't feasible.
The <ul> element has display: block; as its default display property, causing the width to fill 100% of its container.
To change this aspect and still retain all the other default properties of how a <ul> is displayed (e.g. avoid issues with float from other answers), apply display: inline-block; to the list:
ul {
display: inline-block;
background-color: green;
}
.highlight {
background-color: orange; /* for demonstration */
padding: 15px; /* for demonstration */
}
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
<li>banana</li>
</ul>