昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下:
<ul id="BulletedList1" style="width:300px;"> <li><a href="javascript:__doPostBack('BulletedList1','0')">课程更新</a></li><li><a href="javascript:__doPostBack('BulletedList1','1')">专题讲座</a></li><li><a href="javascript:__doPostBack('BulletedList1','2')">资料下载</a></li>
他在页面中显示的间距太挤,于是我想要用css来控制一下超链接的外边距,和内边距。下面是我css的代码:
#div_menu a{ text-decoration :none; margin-top:10px; padding:5px; } #div_menu a:hover{ color:Red; }
我明显是用css控制了,但是我调试后在页面上根本没有出现效果,以前是什么样的,现在依然是什么样。然后在网上查了一些资料,原来a标签是内联元素,高,行高,以及内边距都是不可改变的。他们是根据元素中的内容而确定元素的大小的。于是在上述的代码中的
#div_menu a 中加上一条css控制语句 display:block;将该元素变为块元素即可。
修改后的css代码如下:
#div_menu a{
display:block;
text-decoration :none;
margin-top:10px;
padding:5px;
}
#div_menu a:hover{
color:Red;
}
这样就是实现a超链接的边距样式的控制。
以下总结了html中快元素和内联元素之间的用法、区别以及联系
内联元素和块级元素都是html中的范畴,块元素和内联元素的主要差异是块元素是从新的一行开始。而内联元素一般显示在一行上。但是可以通过css的display属性将内联元素改变为块元素,(display:block) 也可以将块元素改变为内联元素(display:in-line)。
内联元素的特点
1.和其他的元素显示在一行上;
2.内边距和外边距、高度,宽度都是不可改变的,他的宽度是根据他的显示文本和图像的宽度
3.可以通过css来将它变成为块元素之后然后就可以用css其他样式应用了。
块元素的特点:
1.总是在新的一行上显示;
2.高度、行高、宽度、内边距、外边距等都是可控制的;
3.他的高度默认为0,是根据元素内的内容而决定的,宽度是父元素的宽度,但是可以通过css控制它,显示的指定他的宽度和高度,可以利用浮动和定位来将他与其他的块元素也显示在一行上;
常用的内联(行内)元素
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
常用的块元素
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表