zoukankan      html  css  js  c++  java
  • CSS中如何将li横向排列

    直接贴段例子代码吧:

    @{
    Layout = null;
    }

    <!DOCTYPE html>
    <style type="text/css">
    .test li {
    float: left;
    70px;
    margin: 3px;
    padding: 3px;
    list-style-type: none;
    display:inline;
    }

    </style>
    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>Shared</title>
    </head>
    <body>
    <div class="test" style="overflow:hidden;600px;height:45px; background-color:lightblue;margin-left: auto;margin-right: auto;">
    <ul>
    <li><a href="/Home/Index" style="text-decoration:none">首页</a></li>
    <li><a href="/Home/News" style="text-decoration:none">新闻</a></li>
    <li><a href="/Home/Prodects" style="text-decoration:none">军事</a></li>
    <li><a href="#" style="text-decoration:none">科技</a></li>
    <li><a href="#" style="text-decoration:none">体育</a></li>
    <li><a href="#" style="text-decoration:none">联系</a></li>
    </ul>
    </div>
    <div style="height:20px; 1200px; background-color:green;margin-left: auto;margin-right: auto;">
    </div>
    <div class="main">
    @RenderBody()
    </div>
    </body>
    </html>

  • 相关阅读:
    租房子查询练习
    投票练习题
    多条件查询
    查询
    练习---新闻界面
    mysql增删改处理
    挖宝游戏
    mysql数据访问
    练习···表格
    类的使用
  • 原文地址:https://www.cnblogs.com/jinghuimin/p/4977871.html
Copyright © 2011-2022 走看看