选择标签似乎弄乱了我的CSS

时间:2012-06-19 12:59:23

标签: javascript html css

这是我的页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head >
<link rel="Stylesheet" type="text/css" href="Content/themes/base/jquery-ui.css" />
<link rel="Stylesheet" type="text/css" href="Content/themes/base/jquery.ui.base.css" />
<link rel="Stylesheet" type="text/css" href="Content/themes/base/jquery.ui.theme.css" />
<link rel="Stylesheet" type="text/css" href="Content/ui.jqgrid.css" />

<style type="text/css">
ul, ol { margin-left:1.5em; padding-left:0px; }
li { margin-bottom:2.5em; }
body,
    html {
        margin:0;
        padding:0;
        color:#000;
        background:#a7a09a;
    }
#wrapper{
    width:100%;
    height:1024px;
    background:#f5f5f5;
}

#sideBar{
    width:20%;
    height:1024px;
    background:red;
    display:block;
    float:right;
}
#mainContent{
    width:80%;
    height:1024px;
    background:blue;
    display:block;
    float:left;
}
    * html #footer {
        height:1px;
    }

</style>

<script type="text/javascript" src="Scripts/modernizr.custom.05850.js"></script>

<script type="text/javascript" src="Scripts/jquery-1.7.2.js" > </script>

<script type="text/javascript" src="Scripts/jquery-ui-1.8.19.min.js"></script>

<script  type="text/javascript"  src="Scripts/grid.locale-en.js" ></script>

<script   type="text/javascript" src="Scripts/jquery.jqGrid.min.js"></script>

<script type="text/javascript" src="Scripts/json2.min.js"></script>

<script type="text/javascript" src="Scripts/knockout-2.1.0.js"></script>

<script type="text/javascript" src="Scripts/knockout.mapping-latest.js"></script>

<script type="text/javascript" src="Scripts/linq.min.js"></script>


<script type="text/javascript" src="Scripts/jquery.layout-latest.js"></script>

</head>
<body>
<div id="wrapper">
    <div id="sideBar">


    <select   id='listOfExistingViews'  />    


    <ul >


    <li>

TEST1

    </li>

    <li>

     TEST2
    </li>

    </ul>

    </div>
    <div id="mainContent"></div>
</div>



</body>
</html>

问题在于'select'元素,因为它不允许显示/呈现ul元素,并且主容器也不保留其背景颜色。一切似乎工作正常虽然没有使用选择元素..:|         我到底错过了什么......

2 个答案:

答案 0 :(得分:3)

您需要有效的select代码。

<select id="listOfExistingViews"></select>

答案 1 :(得分:0)

您需要正确打开和关闭选择标记,然后选择必须跟随选项:

<select id='listOfExistingViews'>
 <option value='1'>TEST1</option>
 <option value='2'>TEST2</option>
</select>