直接贴段例子代码吧：

@{
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. 把java文件打包成.jar (jar命令详解)

    把java文件打包成.jar (jar命令详解) 先打开命令提示符(win2000或在运行框里执行cmd命令,win98为DOS提示符),输入jar Chelp,然后回车(如果你盘上已经有了jdk1. ...

  2. myeclipse如何导入相应的jar包

    方法一: 相应的项目------>右键------->build path-------->Config BuildPath...------->Libraries------ ...

  3. 读loadBalance技术的一些笔记

    以前知道loadbalance的原理,但是仅仅是浅浅的了解过,今天看了一篇 10多年前 一位大神级别人物 写的文章 顿时学习了 http://www.linuxvirtualserver.org/zh ...

  4. iframe式ajax调用示例

    1.新建 a.html <!doctype html> <html> <head> <meta charset='utf-8'> <title&g ...

  5. 从零开始学android开发-获取控件

    mBtnNews = (Button)findViewById(R.id.btn_news);//获取控件

  6. 【JavaScript】关于javascript原型的深入理解

    http://mozilla.com.cn/post/21667/ http://liuzhijun.iteye.com/blog/1157453 http://liuzhijun.iteye.com ...

  7. [AngularJS+ GSAP] Greensock TimelineLite Animation Sequences

    TimelineLite is a piece of the Greensock TweenMax library that provides the ability to create sequen ...

  8. java课堂练习之可变參数与卫条件

    /*  有人邀请A,B,C,D,E,F 6个人參加一项会议,这6个人有些奇怪.由于他们有非常多要求,已知:  1)A,B两人至少有1人參加会议:  2)A,E,F 3人中有2人參加会议.  3)B和C ...

  9. 一行命令搞定VS2012无法安装cocos2d-x-2.1.4及创建跨平台项目（二）

    转自:http://blog.csdn.net/yangjingui/article/details/9418843 由于上次发了一个比较二的方法来解决VS2012无法安装cocos2d-x-2.1. ...

  10. 倒数计数器-CountDownLatch

    最近写一个多线程程序,老是MAIN方法执行完了子线程还没执行完(不知道以前怎么玩儿的),得不到最终结果,于是找到了CountDownLatch CountDownLatch是一个同步辅助类,java. ...