HTML样式列表
[英]Html styled list
问题描述
I just have been looked into Google's source code and I saw that the side bar is created from the <ul> and <li> tags which the use for them is making list. 
我只是被看过Google的源代码，并且看到边栏是由<ul>和<li>标记创建的，它们的用途正在列出这些标记。
So as I said I saw their side menu bar and I tried to do the same, something like this : http://jsbin.com/oyibok/edit#javascript,html,live 因此，正如我所说的，我看到了他们的侧边菜单栏，并且我尝试这样做，就像这样： http : //jsbin.com/oyibok/edit#javascript,html,live
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<ul>
<li> dsds </li>
<li> dsds </li>
</ul>
</body>
</html>
not quiet worked out, is there any technique that I can use to do the same as Google's did and make a list without the followed dot? 不是很安静，我可以使用什么技术来做和Google一样的工作，并在没有后跟点的情况下列出列表吗？
4 个解决方案
解决方案1
4 已采纳 2011-11-27 21:28:32
To get rid of the dots, just add the following css: 要消除这些点，只需添加以下CSS：
ul {
list-style: none;
}
解决方案2
1 2011-11-27 21:48:49
yes - the answer is css. 是的-答案是CSS。 you should do something like 你应该做类似的事情
ul {
list-style-type: none; /* look mom - no dots */
}
ul li {
display:inline; /* look mom - no block display - only if you want a horizontal nav */
}
a {
text-decoration:none /* look mom - no underline */
}
also as you may notice if this is a navbar you probably would put links inside the li element with a elements by the way - all modern nav bars are lists.. 另外，您可能会注意到，如果这是一个导航栏，则可能会将链接放在li元素内并带有a元素-所有现代导航栏都是列表。
解决方案3
0 2011-11-27 22:27:01
In addition to removing the bullets/dots in CSS, you may also want to reset the margins to margin: 0px if you want the top-level list items to be flush with the left side of their container. 除了要删除CSS中的项目符号/点外，如果您希望顶层列表项与其容器的左侧齐平，则可能还需要将页边距重置为margin: 0px 。
In most browsers, just removing the bullets still leaves white space where they normally are. 在大多数浏览器中，仅删除项目符号仍会留有通常的空白。
解决方案4
0 2011-11-27 22:52:51
A list has the bullet points by default, and also some margins and padding. 默认情况下，列表具有项目符号点以及一些边距和填充。
<ul>
<li><a href="">list item 1</a></li>
</ul>
With CSS you can change the way the list looks. 使用CSS，您可以更改列表的外观。
<style>
/* the styles go in between the style tag */
</style>
You can use CSS to grab each element in the list and change the properties. 您可以使用CSS来获取列表中的每个元素并更改属性。
For example I usually start by removing the list style, margin and padding. 例如，我通常首先删除列表样式，边距和填充。
ul { list-style:none; margin:0; padding:0; }
Next you can change the link or anchor tags to have a width and height and background colour. 接下来，您可以将链接或锚标记更改为具有宽度和高度以及背景色。
Links by defaul are inline elements, which means they don't force a new line but flow inline.. I need them to be displayed as a block element so I can style it. 默认情况下，链接是内联元素，这意味着它们不会强制换行，而是内联。.我需要将它们显示为块元素，以便对其进行样式设置。
ul a:link,
ul a:visited { display:block; width:100px; height:20px; line-height:20px; background:blue; }
Now when the user hovers the mouse over the link you can change its colour again, CSS stacks so all the styles you wrote above will still apply but we can over write whatever we choose. 现在，当用户将鼠标悬停在链接上时，您可以再次更改其颜色，因此CSS会堆叠，因此您上面编写的所有样式仍然适用，但是我们可以覆盖选择的内容。
ul a:hover { background:orange; }
Some reading: http://www.w3schools.com/css/css_list.asp 一些阅读： http : //www.w3schools.com/css/css_list.asp
Once you know how to select elements using CSS, you will be able to create pretty much anything. 一旦知道了如何使用CSS选择元素，您就可以创建几乎所有东西。
You can give HTML elements a unique id or a class. 您可以给HTML元素一个唯一的ID或一个类。 An id is used to select a single element, on it's own. id用于选择单个元素。
But if you have a lot of elements, a class is used. 但是，如果您有很多元素，则使用一个类。
"#" for Ids and a "." Ids的“＃”和“。” For classes. 上课。
Example: 例：
<div id="something">some text wrapped in a div with an id</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<style>
#something { background:red; }
.something { background:blue; }
</style>
The startings http://jsbin.com/oyibok/5/edit 起点http://jsbin.com/oyibok/5/edit
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.