html中a标签如何设置行宽高

方法一：float，对a样式盒子float:left让它成浮动
直接演示一下了(实现下面页面)

代码如下

<style>#page{width:120px;                        /* 在外面画一个区域   */height:700px;}li{list-style:none;}a{text-decoration:none;               /* 去除a标签自带下划线   */color:blue;border:1px solid #999;background-color: #F0F0F0;text-align:center;margin:2px 5px;float:left;                         /* 设置浮动 */width:80px;height:20px;}
</style><body><div id="page"><ul><li><a href="#">电脑硬件</a></li><li><a href="#">手机报价</a></li><li><a href="#">数码产品</a></li><li><a href="#">办公用品</a></li><li><a href="#">化妆品</a></li><li><a href="#">流行服饰</a></li><li><a href="#">家居用品</a></li></ul></div>
</body>
</html>

这种方法的缺点是,a浮动了，可能会照成与其它文字内容重叠，或者整个页面布局会变化,如下图

这时可以采取在整个a标签外画一个区域，上面代码中有注释

方法二：对a标签样式加display:block;或者display:inline-block;加后实现成块状属。
代码如下

<style>#page{/* width:120px;                     /* 在外面画一个区域   */height:700px; */}li{list-style:none;}a{text-decoration:none;               /* 去除a标签自带下划线   */color:blue;border:1px solid #999;background-color: #F0F0F0;text-align:center;margin:2px 5px;display:inline-block;               /* 行标签属性改为块属性  */width:80px;height:20px;}
</style><body><div id="page"><ul><li><a href="#">电脑硬件</a></li><li><a href="#">手机报价</a></li><li><a href="#">数码产品</a></li><li><a href="#">办公用品</a></li><li><a href="#">化妆品</a></li><li><a href="#">流行服饰</a></li><li><a href="#">家居用品</a></li></ul></div>
</body>
</html>

转载于:https://www.cnblogs.com/wangqilong/p/9417584.html

html中a标签如何设置行宽高相关推荐

徐志摩题要求：•使用外部引入CSS样式的方式为网页设置样式 •标题使用＜h3＞标签，其他文本均放在段落标签＜p＞中 •使用标签选择器设置标题h3的字体颜色为#ddf111 •使用ID选择器设置p段
徐志摩题要求: •使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 • ...
Html百分比设宽偏差大,absolute和relative元素设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
未开启横屏时，设置了宽高为窗口100%的视频，竖屏方向播放时，变形问题解决
当手机未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,会有拉伸,可以根据手机宽高比例判断横竖屏状态,来设置旋转视频元素,同时更新设置视频元素宽高(与之前状态的宽高值对调) demo: & ...
img图片太大设置图片宽高，图片显示变形解决办法
当img图片太大时,设置图片宽高图片显示就会变形,object-fit属性就可以很好的解决这个问题: <div><img src="https://img0.baidu.c ...
Unity 在代码中动态改变RectTransform位置及宽高的方法整理
原文链接(尊重原著):[100个 Unity实用技能] | Unity 在代码中动态改变RectTransform位置及宽高的方法整理_unity 修改recttransform_呆呆敲代码的小Y ...
html 选择自动增加行数,为网页中的源代码自动设置行号
本文演示了如何为网页中的源代码块自动设置行号. 现在,我们准备在网页中显示C++的Hello world.这段著名的代码如下所示: #include intmain() { std::cout < ...
html中怎么写虚线框的宽高,html如何设置虚线边框
网页布局中我们未来整体的网页美观我们可能需要设置虚线边框,但是你知道html如何设置虚线边框吗?本篇文章就来给大家介绍一下html设置虚线边框的方法. 用到CSS样式和HTML标签元素为了对html ...
html li圆点单独颜色,html中li标签可以设置颜色吗
在HTML中如果在ul>li中添加子标签>a链接,修改li中或者是有什么方法可以让修改li的字体颜色时,a标签的字体颜色也改变, --由于CSS的层叠(cascading),a元素继承自l ...

html中a标签如何设置行宽高

html中a标签如何设置行宽高相关推荐

最新文章

热门文章