图标怎么横着放,竖着放太大了,把空间都占完了。。。。。。java 2C
 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//Dth HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dth">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${ctx }/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx }/themes/icon.css">

<script type="text/javascript" src="${ctx }/jquery.min.js"></script>
<script type="text/javascript" src="${ctx }/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/easyui-lang-zh_CN.js"></script>
<title>这是展示的主页</title>
<script type="text/javascript">
$(function(){   
    //顶部导航切换
    $(".nav li a").click(function(){
        $(".nav li a.selected").removeClass("selected")
        $(this).addClass("selected");
    })  
})  
</script>
</head>
<body>
    <!-- 这边是通过easyui进行布局,通过layout的class属性进行部署 -->
    <div class="easyui-layout" style="width: 100%;height:730px;">
        <div region="north" split="true" >
        <div class="topleft">
         <a href="main.html" target="_parent"><img src="images/logo.png" title="系统首页" /></a>
         <ul class="nav" style="width:100%;height:130px;">
            <li><a href="default.html" target="rightFrame" class="selected"><img src="images/icon01.png" title="工作台" /><h2>工作台</h2></a></li>
            <li><a href="imgtable.html" target="rightFrame"><img src="images/icon02.png" title="模型管理" /><h2>模型管理</h2></a></li>
            <li><a href="imglist.html"  target="rightFrame"><img src="images/icon03.png" title="模块设计" /><h2>模块设计</h2></a></li>
            <li><a href="tools.html"  target="rightFrame"><img src="images/icon04.png" title="常用工具" /><h2>常用工具</h2></a></li>
            <li><a href="computer.html" target="rightFrame"><img src="images/icon05.png" title="文件管理" /><h2>文件管理</h2></a></li>
            <li><a href="tab.html"  target="rightFrame"><img src="images/icon06.png" title="系统设置" /><h2>系统设置</h2></a></li>
         </ul>
         </div>
        </div>
        <div region="west" title="红色警戒" split="true" style="text-align: center;width:200px;">
            <div class="easyui-accordion" fit="true">
                <div title="商品管理" iconCls="icon-ok">
                    <ol>
                        <li><a href="#">添加商品</a></li>
                        <li><a href="#">更新商品</a></li>
                        <li><a href="#">其他</a></li>
                    </ol>
                </div>
                <div title="考勤管理" iconCls="icon-ok">
                    <ol>
                        <li><a href="#">查询所有用户信息</a></li>
                        <li><a href="#">添加</a></li>
                        <li><a href="#">其他</a></li>
                    </ol>
                </div>
                <div title="用户管理" iconCls="icon-ok">
                    <ol>
                        <li><a href="#">查询所有用户信息</a></li>
                        <li><a href="#">添加用户</a></li>
                        <li><a href="#">其他</a></li>
                    </ol>
                </div>
                <div title="公告管理" iconCls="icon-reload">
                    <ol>
                        <li><a href="#">设置公告</a></li>
                        <li><a href="#">公告列表</a></li>
                        <li><a href="#">查询公告</a></li>
                        <li><a href="#">其它</a></li>
                    </ol>
                </div>
            </div>
        </div>
        <div region="center" style="text-align: center;">
            <div class="easyui-tabs">
                <div title="欢迎使用">
                    <div style="padding: 10px">
                        <table class="easyui-datagrid" url="${ctx }/goods/list" style="width: 1000px;height: 600px;" pagination="true">
                            <thead>
                                <tr>
                                    <th field="id" width="150px">ID</th>
                                    <th field="goodsname" width="150px">商品编号</th>
                                    <th field="goodsrice" width="150px">商品价格</th>
                                    <th field="goodskc" width="150px">商品库存</th>
                                    <th field="goodszk" width="150px">商品折扣</th>
                                    <th field="goodscz" width="150px">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!--Easyui很强大,这下面的内容已经不需要再写了。所以注释掉 
                                <tr>
                                    <td>1</td>
                                    <td>导弹</td>
                                    <td>¥500</td>
                                    <td>500</td>
                                    <td>9.5</td>
                                    <td>
                                        <a class="easyui-linkbutton" iconCls="icon-ok">编辑</a>
                                        <a class="easyui-linkbutton" iconCls="icon-cancel">删除</a>
                                    </td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div region="east" split="true" style="text-align: center;width:200px;">
            <ul class="easyui-tree" style="text-align:left;width:200px;">
                <li>
                    <span>这是第一集菜单</span>
                    <ul>
                        <li>
                            <span>
                                这是第二集菜单。
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="easyui-tree" style="text-align:left;width:200px;">
                <li>
                    <span>这是第一集菜单</span>
                    <ul>
                        <li>
                            <span>
                                这是第二集菜单。
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div region="south" split="true" style="text-align: center;height:30px;">
            这是南边
        </div>
    </div>
</body>
</html>

再来张效果图

图片说明

2个回答

.nav li { float:left; } .nav li a { display:block; padding:8px 50px; text-decoration:none; border-right:1px solid #000; }

加入上面style试试。

.nav li{ display:inline} 这样应该就可以了

a493671678
很懒的冰箱 回复qq_39586869: li是块级元素,会换行的吧。你把他变成行级元素的他就不会换行了,你给li加个style="display:inline;"试试
2 年多之前 回复
qq_39586869
qq_39586869 你这是什么代码?我怎么看不懂啊?我用的是easyui,别人的没有用前端框架就显示出来了,但是我这个用了前端框架可能是有冲突吧,就显示的是竖着的,别人没用框架的就是横着的。。。
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问