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

最新推荐文章于 2024-06-22 12:35:18 发布

-小龙人

最新推荐文章于 2024-06-22 12:35:18 发布

阅读量1.5w

点赞数 4

分类专栏： # JavaScript 文章标签： html 标签

本文链接：https://blog.csdn.net/qq_36330228/article/details/72353315

版权

JavaScript 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

方法一：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>