直接贴段例子代码吧：

@{
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异常处理中finally中的return会覆盖catch语句中的return语句

    Java异常处理中finally中的return会覆盖catch语句中的return语句和throw语句,所以Java不建议在finally中使用return语句 此外 finally中的throw语 ...

  2. JavaWeb-10(会话技术之session&amp;JSP)

    JavaWeb-会话技术之session&JSP 会话管理之Session技术 一.Session 在WEB开发中,server能够为每一个用户浏览器创建一个会话对象(session对象),注 ...

  3. imindmap7_windows_7.0

    思维导图工具: imindmap7_windows_7.0 iMindMap7.0 和谐包V1.0 22:27:23

  4. jQuery分别获取选中的复选框值

    function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(func ...

  5. ASP.NET Web Forms的改进

    虽然ASP.NET Web Forms不是vNext计划的一部分,但它并没有被忽视.作为Visual Studio 2013 Update 2的一部分,它重新开始支持新工具.EF集成和Roslyn. ...

  6. ecmall widgets 挂件开发详解

    Ecmall挂件开发 实质上是后台开发很多页面,分别去调用程序展示这些页面,达到首页内容更换很快的目的,这样做减少后续开发,开发人员只需开发挂件就可以了,至于位置可随意定.(还需调整html,但是起码 ...

  7. iis7.5配置.net mvc注意事项

    iis7.5配置.net mvc注意事项   1. 应用程序池采用经典模式,framework4.0.可能存在权限问题,解决办法:在高级设置的标识设为LocalSystem.一般mvc都采用集成模式, ...

  8. MyBatis中主要类的生命周期和应用范围

    转自:http://ccchhhlll1988-163-com.iteye.com/blog/1420026 MyBatis中常用的类就要数SqlSessionFactoryBuilder.SqlSe ...

  9. mysql分表研究

    分表是分散数据库压力的好方法. 分表,最直白的意思,就是将一个表结构分为多个表,然后,可以再同一个库里,也可以放到不同的库. 当然,首先要知道什么情况下,才需要分表.个人觉得单表记录条数达到百万到千万 ...

  10. layer.js,,,分享一个好用的弹出层

    基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...