直接贴段例子代码吧：

@{
Layout = null;
}

<!DOCTYPE html>
<style type="text/css">
.test li {
float: left;
width: 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;width: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; width:1200px; background-color:green;margin-left: auto;margin-right: auto;">
</div>
<div class="main">
@RenderBody()
</div>
</body>
</html>

CSS中如何将li横向排列的更多相关文章

  1. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  3. 无序列表li横向排列的间隙问题

    今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...

  4. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  5. 无序列表li横向排列

    一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...

  6. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  7. 关于css中使用ul li的一些体会

    参考网址:http://hi.baidu.com/july_leo/item/5237cd612070ae2668105b40 如何修改ul li的显示 ----------------------- ...

  8. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  9. 菜单制作:ul li横向排列

    CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. 常用CSS3效果：用text-shadow做CSS3 文字描边

    思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...

  2. 一个获取文件绝对路径的sh

    脚本里有个获取文件绝对路径的需求,linux里有个很方便的realpath命令,但是mac下没有,甚至readlink -f也跟linux下的表现不同,所以……直接用pwd算了 #!/bin/bash ...

  3. wget 命令用法详解

    wget是在Linux下开发的开放源代码的软件,作者是Hrvoje Niksic,后来被移植到包括Windows在内的各个平台上.它有以下功能和特点:(1)支持断点下传功能:这一点,也是网络蚂蚁和Fl ...

  4. 从头学Android系列

    从头学Android系列 http://blog.csdn.net/worker90/article/category/888358

  5. AlarmDemo-with-Database

    https://github.com/anuj7sharma/AlarmDemo-with-Database

  6. java 验证码图片处理类，为验证码识别做准备

    /* * To change this template, choose Tools | Templates * and open the template in the editor. */pack ...

  7. Perl 小知识之多行匹配

    如果想匹配多行文本(即文本中有换行符)中的内容,比如: aaa ... bbb ... 要匹配aaa和bbb之间的内容,我们可以使用 /aaa.*bbb/s 其中/s修饰符可以让.匹配任何字符,包括换 ...

  8. 0c-37-ARC

    .什么是ARC? Automatic Reference Counting,自动引用计数,即ARC,可以说是WWDC2011和iOS5所引入的最大的变革和最激动人心的变化.ARC是新的LLVM .0编 ...

  9. 你真的了解javascript吗

    原文地址:http://dmitry.baranovskiy.com/post/91403200 看了文章中五个小例子,写了写自己的理解 #demo1 if (!("a" in w ...

  10. Linux中的文件描述符与打开文件之间的关系

    Linux中的文件描述符与打开文件之间的关系 导读 内核(kernel)利用文件描述符(file descriptor)来访问文件.文件描述符是非负整数.打开现存文件或新建文件时,内核会返回一个文件描 ...