Pretty simple, but I can't figure it out.
I have a word followed by an <ul>. I made the unordered list have inline styling, but I want it to be on the same line as the word before it.
JSfiddle: http://jsfiddle.net/fm74R/4/
Use this template to make it look like: "Tags: funny unique Add a tag to the post"
Thanks!
Working Fiddle
ul{
display:inline-block;
padding:0;
}
Best way to do this is give everything an inline form of display.
HTML:
Tags:
<ul style="list-style: none;">
<li>funny</li>
<li>unique</li>
<li>
Add a tag to the post
</li>
</ul>
CSS:
li {margin:0; padding:0;display:inline;}
ul {margin:0; padding:0; display:inline;}
http://jsfiddle.net/fm74R/10/
Related
Please see below:
<span class="caption">
{block:Caption}<p>{Caption}</p><hr>{/block:Caption}
</span>
The Caption block will contain text, part of which is a link. How do I create CSS that will underline the link within the "caption" span only?
First of all - you can't have inline element around block element.
Than just do a{text-decoration: none;} .caption a{text-decoration: underline}
there is also the :not() selector to filter tags to select:
example with links and valid HTML:
li:not(.nop) a {
text-decoration:none;
}
<nav>
<ul>
<li>Lorem</li>
<li class="nop">Do not touch my underline defaut </li>
<li>Morbi</li>
<li>Praesent</li>
<li>Pellentesque</li>
</ul>
</nav>
Try jQuery:
$(document).find('span.caption').each(function(){
$(this).css('text-decoration','underline');
})
Fiddle here: https://jsfiddle.net/qq4j5uz2/
If i understand correctly it would be something like this:
.caption a{
text-decoration: underline;
}
I've looked at various solutions in regards to this question, but they don't seem to apply.
This is my simple HTML code:
<ul>
<li>Home</li>
<li>Games</li>
<li>Trivia</li>
</ul>
How do I increase the space between the text and the line underneath it?
Use <br> or line-height css rules or simply do that to <li> css:
li
{ display:block;
height:XXXX;
}
Add this to your css:
li {
margin-bottom:5px;
}
Change 5px accordingly.
There are actually three or more ways.. here are the best three:
1. make that will make a brake between them, like you just hitted enter key.
2. You can use li{padding-top:10px;padding-bottom:10px;} or just in html using
ul>
li style="padding-top:10px;padding-bottom:10px;">Home
You know what I mean, I cant write it correctly, cause it will do ul in that post..
now, the third should be same as padding, but use "margin" instead
<style type="text/css">
#featured a:first-child
{
background-color:yellow;
}
</style>
<div id="featured">
<ul class="ui-tabs-nav">
<li><span>test 1</span></li>
<li><span>test 2</span></li>
<li><span>test 3</span></li>
<li><span>test 4</span></li>
</ul>
</div>
I wanted to highlight first anchor from the list, but unfortunately all anchors are highlighted. What is the mistake do here.
They are all highlighted because each a is the first-child of its parent li
What you probably want is something like:
#featured li:first-child a
{
background-color:yellow;
}
Because all anchors are the first child of their parents. You need to:
#featured li:first-child a {
background-color: yellow;
}
If you always have a list I would prefer the CSS solution like #powerbuoy and #danwellman posted. If you just want to format the first anchor tag nested inside an arbitrary tag (with id featured) with arbitrary nesting-level then I would prefer jQuery:
$('#featured a').first().css('background-color', 'yellow');
Example with div's rather than an unordered list: http://jsfiddle.net/9vAZJ/
Same jQuery code formatting a list (like in the question): http://jsfiddle.net/9vAZJ/1/
The jQuery code is a more general solution and fits better to your initial try to format the anchor tag in your question since both solutions are decoupled from list tags.
Nevertheless when list-styling is your only task here then I would recommend the CSS solution.
I've got a horizontal list with long items that I want to wrap. The list wraps fine if one list item is really long or if all the list items are really short.
However, if two list items are both long, they will not split across the available space. This image shows the problem:
Here's the markup I'm using:
<html>
<style>
ul {text-align:left; width:400px}
li {float:left; padding-left:20px; list-style-type:none; display:inline; white-space:normal;}
li a {display:inline; white-space:normal;}
</style>
<body>
<ul>
<li>>alf; fa sadlf; </li>
<li>>a sdf; fa sd; asd;lfgj </li>
<li>>a sdfasdgsadlf; asd;lfgj asdgsadlf sd; asd;lfgj </li>
<li>>a sdg gj asdgsadlf; afg adfg asd;lkfalfgj</li>
</ul>
</body>
</html>
You can do this by getting rid of some of your code. If I understand correctly, all you'll need is the following:
ul { width:400px; }
li {
list-style-type:none;
display:inline;
padding-left:20px
}
Here's an example: http://jsfiddle.net/M9zqE/
It's fixed by not floating items (thus not removing them from the flow)
See http://jsfiddle.net/pRCFR/
I have some legacy html markup and I need to enable Arabic language support.
So, I have a list of news headlines and render them in <li> elements.
Here is sode:
..
<li>
<a>some Arabic text</a>
<em>news datetime</em>
</li>
..
So, I need to apply rigth text-alignment and direction rtl for anchor, but not for datetime.
I applied text aligment for <li> element and everything is fine.
But I need to apply "direction: rtl" style to anchor and here goes my problem.
I've tried to create <div> element with rtl direction attribute and put anchor into it. This works fine in chrome, but I need to support IE6+
Also I've tried to apply direction attribute to <li> and override this attr in <em>, but this doesn't work.
Any suggestions?
Thanks in advance,
Vitali.
li {direction:rtl}
em {direction:ltr; float:left}
if em is out of li
<ul dir="rtl">
<li>العربية</li>
<em>11/24/2011</em>
<li>العربية</li>
<em>11/24/2011</em>
<li>العربية</li>
<em>11/24/2011</em>
<li>العربية</li>
<em>11/24/2011</em>
</ul>
if u need em inside div
<style>
ul { direction:rtl; } ul li em{direction:ltr;} /* em{direction:ltr; float:left;} */
</style>
<ul>
<li>العربية
<em>11/24/2011</em>
</li>
<li>العربية
<em>11/24/2011</em>
</li>
<li>العربية
<em>11/24/2011</em>
</li>
</ul>
if your arabic script contain english words
<style>
ul { direction:rtl; } ul li{ direction:rtl; } ul li em{direction:ltr;} /* em{direction:ltr; float:left;} */
</style>