<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>设置链接<a>的尺寸</title>
<style>
a{
  width:120px;
  height:80px;
  border:1px solid red;
  color:black;
  text-decoration:none
}
</style>  
</head>
<body>
<a href="http://www.softwhy.com">51前端</a>
</body>
</html>
可以看到,css设置的链接a的尺寸,且代码毫无语法错误,但是并没有生效。
这是因为链接a元素是内联元素,width和height属性对内联元素无效。
那么首先将其转换为块级元素或者内联块级元素,就可以设置它的尺寸了。
代码修改如下:
   [ 其他 ] 运行代码    下载代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>设置链接<a>的尺寸</title>
<style>
a{
  width:120px;
  height:80px;
  border:1px solid red;
  color:black;
  text-decoration:none;
  display:block;
}
</style>  
</head>
<body>
<a href="http://www.51qianduan.com">51前端</a>
</body>
</html>
通过display:block将链接<a>元素转换为块级元素。
成功设置链接<a>元素尺寸,将内联元素转换为块级元素或者块级内联元素的方式有很多。
内联元素还有一个重要的特点需要注意,就是不能够设置上下内外边距。
不是说设置后不生效,而是会出现一些难以预料的效果,但是能够正常设置内联元素的左右内外边距。
代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>设置链接<a>的尺寸</title>
<style>
a{
  width:120px;
  height:40px;
  border:1px solid red;
  color:black;
  text-decoration:none;
  padding:10px;
}
</style>  
</head>
<body>
<a href="http://www.51qianduan.com">51前端</a>
</body>
</html>
左右内边距的表现非常正常,看看顶部是不是非常奇怪。
所以对于内联元素你可以设置它的左右内外边距,但是要设置上下内外边距,需要将其转换为块级元素或者块级内联元素。下面再来罗列一下内联元素的一些特点:
(1).无法设置尺寸。
(2).可以使用text-align设置内联元素的对齐方式。
(3).内联元素可以同时在一行排列。
(4).内联元素不能设置上下内外边距,可能会出现意想不到的情况。

代码描述:设置链接 尺寸,设置链接<a>的尺寸



65 87



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 jshtml对象 javascripthtml对象
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到