zoukankan      html  css  js  c++  java
  • 不确定宽度的块级元素的水平居中三方法

    <style>
    ul{list-style:none;margin:0;padding:0;}
    table{margin:0 auto;}
    .test li{float:left;display:inline;margin-right:5px;}
    .test a{float:left;20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:#fff;border:1px solid #316ac5;text-decoration:none;}
    .test a:hover{background:#fff;color:#315ac5}
    </style>
    <div class="warp">
    <table>
    <tbody>
    <tr><td class="warp">
    <ul class="test">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    </ul>

    </td></tr>
    </tbody>
    </table>
    </div>
    <div class="warp">
    <table>
    <tbody>
    <tr><td class="warp">
    <ul class="test">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    </ul>

    </td></tr>
    </tbody>
    </table>
    </div>

    <style>
    .warp2{background:#000;500px;height:100px;}
    .test2{ text-align:center;padding:5px }
    .test2 li{ display:inline;}
    .test2 li a{padding:2px 6px;background:#316ac5;color:#fff;border:1px solid #9C6;
    text-decoration:none;}
    .test2 li a:hover{background:#fff;color:#000}
    </style>

    <div class="warp2">
    <ul class="test2">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    </ul>
    </div>


    <style>
    .warp3{background:#ccc;500px;height:50px;}
    .test3{padding-top:5px;float:left;position:relative;left:50%; clear:both}
    .test3 li{float:left;display:inline;margin-right:5px;position:relative;left:-50%;}
    .test3 li a{float:left;20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:#fff;border:1px solid #316ac5;text-decoration:none;}
    .test3 li a:hover{background:#fff;color:#316ac5;}

    </style>
    <div class="warp3">
    <ul class="test3">
    <li><a href="#">1</a></li>
    </ul>
    <ul class="test3">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>

    </ul>
    <ul class="test3">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>

    </ul>
    <ul class="test3">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    </ul>
    </div>
  • 相关阅读:
    微人事项目-mybatis-持久层
    通过外键连接多个表
    springioc
    Redis 消息中间件 ServiceStack.Redis 轻量级
    深度数据对接 链接服务器 数据传输
    sqlserver 抓取所有执行语句 SQL语句分析 死锁 抓取
    sqlserver 索引优化 CPU占用过高 执行分析 服务器检查
    sql server 远程备份 bak 删除
    冒泡排序
    多线程 异步 beginInvoke EndInvoke 使用
  • 原文地址:https://www.cnblogs.com/jinbiao/p/2314280.html
Copyright © 2011-2022 走看看