If you look at this jsFiddle example:
http://jsfiddle.net/jrXwf/1/
You will see the UL tag displaying a star rating, with text below it on the next line.
Is there any way to get everything on one line?
Thanks
just use float left in your this class .any-rating { float:left; }
or
here is the fiddle : http://jsfiddle.net/jrXwf/15/
http://jsfiddle.net/jrXwf/5/
Add display: inline-block to your unordered list (or any other element that you want to behave that way). You could also float the element, but inline-block probably best represents what you want to accomplish with a minimum amount of hassle. You want to display the element inline, and you want it to have a display box which behaves like a block element (thus inline-block versus inline).
Your overall markup structure could/should be modified. As others have pointed out, nesting a SPAN inside UL is not legal. You also have a fairly complex structure that could possibly be simplified to use fewer elements.
first, remove the <span> surrounding that <ul> because it's illegal. you can't place a block-level element in an inline-level element.
then, style the <ul> with either
display:inline-block
float:left
Add Style display : inline-block to ul with class any-rating
ul.any-rating.rating {
display:inline-block;
}
here is the fiddle http://jsfiddle.net/jrXwf/12/
Related
I really wonder is a li tag in HTML a inline-level or block-level element?
I find that a li tag in a p tag can break a new line, so it's kind of like a block, but it's embedded in a ul tag or a ol tag.
From this point of view, it's kind of like a inline-level element? Which is right?
An li element has a default display value of:
display:list-item
https://www.w3schools.com/cssref/css_default_values.asp
If it is set to display:block the default bullets will be hidden.
dd, dt and li are listing items in HTML so I think block level elemnt's rule will work same for all dd, dt and li. For more solid proof visit this link
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
here you will find all block level element listed.
NOTE: This is intentionally invalid markup to prove a point about block context.
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<p>
<ul>
<li>Hello</li>World
</ul>
Sagar
</p>
</div>
</body>
</html>
The W3School Definition of Inline and Block Element Stands as follows:
An inline element does not start on a new line and only takes up as much width as necessary.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
As you can see in the example above, even though I typed "Hello" inside of the li tag and immediately followed it with "World", the single li tag will not allow the "World" to be on the same line. This demonstrates that the li tag is taking 100% of the available width, proving that li is a block level element.
That is my point of view.
This is really moot, since an li element must occur with a block-level ul or ol.
Since it places theme selves one after one in a stacked manner, it is a block level element.
I am providing w3c documentation link where you can find more about this.
visit this link.
I have a div that I would like to keep inline-block but I want to keep any other elements from appearing on the same line as it.
I know that display:block will clear all the elements after it.
I know that adding a BR tag will clear all the elements after it.
But I would rather use a style such as clear:both except that only works for floating elements.
Is there a CSS style that I can use to clear all the elements after it while continuing to use inline-block?
I've seen another similar question here but no one actually answered the question. I'm 100% not interested in alternatives such as using floats. There was one answer using CSS using content after but it does not work (link).
#Container:after {
content:"\a ";
white-space:pre;
}
Here is a link to an example on JSFiddle. I want to add a break after BorderContainer20016.
Let me repeat. I'm 100% not interested in alternatives such as using floats.
I want to:
Display a series of links, each on a new line
Maintain the links' variable width and text-wrapping ability
Constrain the mouse-hover area of each link to its actual content
Keep the links inside of the content flow
The best solution I can think of is
<div>
Text
</div>
<div>
Text
</div>
, but I don't like adding the non-semantic <div>. I tried using a { float: left; clear: both } , but that took the links out of the content flow. To my knowledge, I can't use a pseudo-selector such as :outer-wrapper. Is there a better solution, or are <div> wrappers the best solution?
*I thought of using <ul><li><a>, but I only have one or two links per page, and it doesn't seem resonable to add <ul><li> in place of <div> just to avoid a <div>
This is largely an opinion-based and philosophy issue, a source of endless and useless debates over “semantic markup”, itself a semantically vague concept. But to turn the question to something more constructive, I would ask what it really matters which markup you use. What does it imply in non-CSS rendering, or when assistive software is used?
From this viewpoint, ul is OK if the default rendering, with bullets, is acceptable. Otherwise, use div, or use br between links. Do not try to use just a with styling, since then the links would by default run together, appearing as inline text with no separator.
Options could be:
(to wrap them on their content)
display:table, to stack them.
display:inline-block or,
float:left to have them on a line.
For the markup, you can wrap <a> into a <nav> tag. and add a role attribut to distinguished it from or for main-navigation.
http://www.w3.org/TR/wai-aria/roles#landmark_roles
Notes: If nav unneccessary any other tag could be used , such as footer or paragraph.
More here : http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element
Thx all
It seems like what you want to put on a page, semantically, is a list of links. So use just that.
ul > li > a { /*whatever you want*/ }
You might consider wrapping the list in a nav, or you could forget the ul altogether and have just
nav > a { display: block; }
Also, don't think all divss are non-semantic. Yes, they don't have a specific meaning, but the spec says they represent their contents. A really great use for a div would be for grouping elements together that have the same theme or function. In your case, I wouldn't have a div that contains just one a, because you'd be right about the div serving as bloat.
<h5>Category</h5><h6>auto</h6>
places Category and auto on separate lines, like this:
Category
auto
How can I place them both on the same line, like this?
Category auto
h(n) elements are 'block' elements, which means they will grow to take all available horizontal space. This also means they will push anything "right" of them down to the next line.
One easy way to accomplish this is to set their display to inline:
<style>
h5, h6 {display:inline;}
</style>
Note that inline-block is not supported in all browsers.
You can also float block elements, but that can become a sticky issue as floating can be fairly complex. Stick with inline for cases like this.
<h5 style="display:inline-block;">Category</h5>
<h6 style="display:inline-block;">auto</h6>
You must change the display mode of the elements. H tags are rendered as BLOCK elements by default. To override this behavior add the following style definitions to your website or CSS
h5,h6 { display: inline; }
You can also decide to let them "float" next to each other you can do that via:
h5,h6 { float: left; }
Please note that floating only works on block elements (so using both styles will perform no float because inline elements cannot float).
Is there an "invisible" tag in HTML (4) that I can use to make CSS distinctions
tag.myclass tag.mysubclass h1 { }
without having any visual impact on the HTML rendered?
My background is that I have areas in a form that belong to different groups. As I am opening those in lightboxes (long story involving DOM operations and such, not really important) I don't want to rely on the usual div class=x or span class=y to style the subsequent elements, as I would have to reset margins here, paddings there, and so on.
A layout-neutral wrapping tag would be just what I need in such situations.
No, there is not.
(And that's because such an element wouldn't really fit into the rest of HTML. The only reason DIV and SPAN affect the surrounding area is because they're block and inline elements, respectively. What would an 'invisible' element be? If you need something that's completely independent, absolutely (or relatively) position it and give it a higher z-index.)
If you want to group elements use a div or a span tag as a wrapper element. Apply your id or class to this, and style it accordingly.
EDIT
There isn't an 'invisible' tag - but margins and padding can be easily reset 'margin: 0; padding: 0;'
While all browsers give default styling to many HTML tags, at it's core HTML only describes data, it doesn't format it.
What you're probably looking for is a DIV tag, because no browser gives any default styling to that tag.
I think you want a <fieldset>.
I'd say a span tag is as neutral as they come. I don't think there's any browser that applies a margin nor a padding and it just wraps around it's contents.
I suspect you can use <object> tag without usual attributes for that purpose, but I haven't tested it thoroughly yet. It's even in HTML5 (unlike FONT tag).
The right answer is use a div tag and define a class for it. Here is an example:
<h2 style="font-size: 14px">Project 1 - Project 2
<div class="username">{% if request.user.is_authenticated%} Welcome {{request.user.username}} {% endif %}</div>
</h2>
then in your css file you can have a class like this:
.username {
color:white;
float:right;
padding-right: 100px;
}
voila!! It all belongs to h2 tag but the user name has a different css applied.
You can add display: none; to it. That won't display it (obviously).