直接贴段例子代码吧：

@{
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. js url图片转bese64

    function convertImgToDataURLviaCanvas(url, callback, outputFormat){ var img = new Image(); img.cross ...

  2. JSP+Servlet+JavaBean

    MVC是三个单词的缩写:M,Model(模型):V,View( 视图 ),C,Control(控制). MVC模式的目的就是实现Web系统的职能分工, Model层:实现系统的业务逻辑,即javaBe ...

  3. NotePad++ 列模式（在多行开头统一添加相同内容）

    ==> 按住Alt键不放,用鼠标左键从第一行的开头处按住向下拉,直到所有行 松开Alt键和鼠标左键,你会发现光标变成了一条跨越所有行的竖线 ==> 如果不想使用鼠标操作,可以使用 Alt+ ...

  4. CMSIS Example - osMutex osMutexWait osMutexRelease

    osMutexDef( Mutex ); osMutexId mutex; void Thread0( void * arg); void Thread1( void * arg); osThread ...

  5. Swift2.0 中的String（一）：常用属性

    字符串算是平常用的比较多.花样也比较多的一个类型,昨天有空把相关的一些常用操作都写了一遍,总结出来.其实iOS里面的字符串更复杂,还有NSString系列等等,那些API太多将来需要用的时候再慢慢学. ...

  6. cocos2d-x android 字体的设置

    我们知道 ios 自带的字体 和 android 自带的字体不同 为了使我们开发的游戏中的字体统一 我们就需要自己的字体(包括从mac 拷贝出来的 字体) 从 mac 中 copy 出 Thonbur ...

  7. centos 服务器配置(一) 之端口占用

    1.查找被占用的端口 netstat -tln netstat -tln | grep 8060 netstat -tln 查看端口使用情况,而netstat -tln | grep 8060则是只查 ...

  8. 基于jquery tool实现的windows桌面效果

    今天给大家分享一款基于jquery tool实现的windows桌面效果.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: ...

  9. 网络传输速度bps与下载文件所需时间的换算

    相信很多同志都非常关注自己家的计算机上网的宽带是多少.关心单位上网的宽带是多少! 但是很多同志都经常误解网络传输速度,以至于责备网络接入商(电信.网通.铁通等单位)欺骗用户,限制上网的速度! 本文,就 ...

  10. 使用docker-hub

    使用docker hub 需要其账号 基本操作 查找镜像 sudo docker search centos 每个用户有自己的命名空间,如:centos是存仓库中的镜像文件,admln/centos则 ...