直接贴段例子代码吧：

@{
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. ArcSDE 10.2建立SDE服务

    从ArcGIS 10.1开始,arcgis官方推荐以直连方式连接SDE,因此在SDE安装时不再自动安装SDE服务,以下是手动安装SDE服务的方法 环境 服务端: oracle 11.2 64位,Arc ...

  2. UVA 12901 Refraction 几何/大雾题

    Refraction Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.a ...

  3. c#winform使用WebBrowser 大全[超长文转载]

    1.主要用途:使用户可以在窗体中导航网页. 2.注意:WebBrowser 控件会占用大量资源.使用完该控件后一定要调用 Dispose 方法,以便确保及时释放所有资源.必须在附加事件的同一线程上调用 ...

  4. Java多线程:线程死锁

    发生死锁的原因通常是两个对象的锁相互等待造成的. 以下用一个实例来构造这样的情况: package basic.e_deadlock; import org.apache.log4j.Logger; ...

  5. linux 认证方式

  6. MySql文章

    转:  MySql安全建议    http://www.cnblogs.com/crystal189/p/3492640.html

  7. 写一个自己定义进度颜色和圆形转动的ProgressBar(具体介绍)

    先上图: 我们得自己定义ProgressBar的样式 <span style="white-space:pre"> </span><style nam ...

  8. sun.misc.BASE64Encoder和sun.misc.BASE64Encoder 找不到解决的方法

    1.右键项目->属性->java bulid path->jre System Library->access rules->resolution选择accessible ...

  9. UIStoryboard

    UIStoryboard 目录 概述 Storyboard的创建 Storyboard中的页面跳转 文件内跳转 文件外跳转 Segues 不同类型的视图控制器在UIStoryboard上的实现 概述 ...

  10. 果然还是SB了

    编译原理的龙书和虎书,各看了两章之后,￥……&……*……@%￥ 好吧,既然是码农,就要从基层做起,我尝试handwritten一下C或者C的极小子集的one-pass编译器先,等有了深切的体会 ...