html <ul>: can I specify it is arranged by horizontal or vertical?
eg:
<ul>
<li>a<开发者_运维百科/li>
<li>b</li>
</ul>
By default it generates: ab But I want:
a
b
How can I do that?
Remember that HTML is a markup language, and defines the semantics (meaning) of the contents. The problem of having the list displayed horizontally is a presentational (display) problem. Therefore the solution you're looking for would involve CSS.
By floating the li elements, we can achieve the effect you want:
ul li {
float: left;
}
You can also try turning the li elements into inline or inline-block elements:
ul li {
display: inline-block;
}
Be aware of the other effects associated with using these CSS properties. Have a look at these articles on how these properties work:
- http://reference.sitepoint.com/css/displaypositionfloat
- http://reference.sitepoint.com/css/display
By default, each new list item will be rendered on a new line.
Since that behavior isn't what you are seeing either you have errors in your markup (or CSS) or you have CSS that styles it differently.
Start by checking for, and fixing, any markup errors with a validator such as http://validator.w3.org/
Then identify the CSS rules that are causing your items to be displayed side by side (Firebug is a good tool for this) and either override or remove them. They are probably related to the display or float property.
You seem to be confusing the default layout and the one you want. By default a unordered list will display as:
- a
- b
If you want to display the items after each other you can either "float" the items or display them "inline". Which one is the "better" solution will depend on what you are actually trying to achieve and what the items contain.
Additionally you may need to set margin and padding of the list and it's items to zero and remove the bullets with list-style
Examples:
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
float: left;
}
or
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
display: inline;
}
These CSS rules will affect all unordered lists in your HTMl document. You'll need to use a id or class selector to limit it to one list or specific lists.
By default it should be generating
- a
- b
You must have a reset styleheet applied. To get it to display how you want you probably need to add to your stylesheet
li {
display: list-item;
list-style-type: none;
padding-left: 0;
}
It should then look like how you have stated in your question.
You can style <ul> and <li> items just like any other HTML element. You can also style other elements to work like lists. The only difference between them and other elements is their default styling.
Therefore, if you style them with float:left; or display:inline;, give them zero padding and margin, and set the list-style to none, you can get them to display virtually any way you like.
Hope that helps.
Instead of floating your list items ("li" elements), display them as inline (the default is block):
display: inline;
Here is an example
<html>
<head><title>xxx</title>
</head>
<style>
li
{
textdecoration: none;
display: inline;
}
</style>
<body>
<ul>
<li>one</li>
<li>two</li>
</ul>
</body>
</html>
加载中,请稍侯......
精彩评论