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>

  • 相关阅读:
    Windows系统的DOS常用命令
    常用pom
    ssm整合
    pom依赖集合
    json
    软件项目管理笔记-软件项目计划
    CSS
    网络配置
    用户组
    用户管理
  • 原文地址:https://www.cnblogs.com/jinghuimin/p/4977871.html
Copyright © 2011-2022 走看看