css 要求横排元素

qhmao 2009-01-04 05:03:42

就是三个方框(ul)需要横排成一行，但是我写的怎么是重叠的，，，，



<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无</title>

<script type="text/javascript" src="../cosmos.slet?method=SP_GB_CATE_SELJS&forward=common.cateSelect"></script>  

<style type="text/css">

#CategorySelector div {

	float:left; height:250px;

}

#CategoryLevel0 {width:100px;border:1px solid #B8860B;}

#CategoryLevel1 {width:100px;padding:0 10px;border:1px solid #d137ed;}

#CategoryLevel2 {width:58px;border:1px solid black;}



</style>

</head>

<body>

	<input type="hidden" name="commend" value="all"/>

	<input type="hidden" name="sort" value="coefp"/>

	<input type="hidden" name="user_action" value="initiative" />

	<div class="Hint">类别：</div>

	<!--需要横排的4个ul-->

	<div id="CategorySelector">

		<div id="CategoryLevel0"/>

		<div id="CategoryLevel1"/>

		<div id="CategoryLevel2"/>

        </div>



    <div class="NewLineInfo">

					<input type="hidden" name="cat" value="0" />

					<input type="hidden" name="path" value="0" />

					<select name="c1"  onchange="javascript:changeSubCat(this);"  tabindex="2">

					</select>

					<select name="c2"  onchange="javascript:changeSubCat(this);"  tabindex="3">

					</select>

					<select name="c3"  onchange="javascript:changeSubCat(this);"  tabindex="4">

					</select>

					<select name="c4"  onchange="javascript:changeSubCat(this);"  tabindex="5">

					</select>

					<input type="hidden" name="prop" value=""/>

					<input type="hidden" name="ppath" value="" />



</body>

</html>

...全文

631 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

qhmao 2009-01-04

打赏
举报

十分感谢lilac0423

最后的修改如下：

<style type="text/css">
#CategorySelector ul {
float:left; height:250px;
}
#CategoryLevel0{ width: 100px; border: 1px solid #B8860B;}
#CategoryLevel1{ width: 100px; padding:0 0;margin:0 0; border: 1px solid #d137ed;}
#CategoryLevel2{ width: 58px; padding:0 0;margin:0 0; border: 1px solid black;}
#CategoryLevel3{ width: 58px; padding:0 0;margin:0 0; border: 1px solid black;}

</style>

烟若辰星 2009-01-04

打赏
举报

额~~似乎写得有点长
这样

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无</title>



    <script type="text/javascript" src="../cosmos.slet?method=SP_GB_CATE_SELJS&forward=common.cateSelect"></script>



    <style type="text/css">

        ul{float: left;padding:0 0;margin:0 0;}

        #CategorySelector div{float: left;height: 250px;}

        #CategoryLevel0{width: 100px;border: 1px solid #B8860B;}

        #CategoryLevel1{width: 100px;padding: 0 10px;border: 1px solid #d137ed;}

        #CategoryLevel2{width: 58px;border: 1px solid black;}

    </style>

</head>

<body>

    <input type="hidden" name="commend" value="all" />

    <input type="hidden" name="sort" value="coefp" />

    <input type="hidden" name="user_action" value="initiative" />

    <div class="Hint">类别：</div>

    <!--需要横排的3个ul-->

    <div id="CategorySelector">

        <ul id="CategoryLevel0"></ul>

        <ul id="CategoryLevel1"></ul>

        <ul id="CategoryLevel2"></ul>

    </div> 

    <div class="NewLineInfo">

        <input type="hidden" name="cat" value="0" />

        <input type="hidden" name="path" value="0" />

        <select name="c1" onchange="javascript:changeSubCat(this);" tabindex="2"></select>

        <select name="c2" onchange="javascript:changeSubCat(this);" tabindex="3"></select>

        <select name="c3" onchange="javascript:changeSubCat(this);" tabindex="4"></select>

        <select name="c4" onchange="javascript:changeSubCat(this);" tabindex="5"></select>

    </div>

        <input type="hidden" name="prop" value="" />

        <input type="hidden" name="ppath" value="" />

</body>

</html>

qhmao 2009-01-04

打赏
举报

,,,,,

烟若辰星 2009-01-04

打赏
举报

还可以这样改
直接在样式表中加上

ul{float:left;}

要是ul之间不想要那么大的空格的话就这样

ul{float:left;padding:0 0;margin:0 0;}

烟若辰星 2009-01-04

打赏
举报

然后css那边，这样改



        #CategoryLevel0{float:left;width: 100px;border: 1px solid #B8860B;}

        #CategoryLevel1{float:left;width: 100px;padding: 0 10px;border: 1px solid #d137ed;}

        #CategoryLevel2{float:left;width: 58px;border: 1px solid black;}

烟若辰星 2009-01-04

打赏
举报

把你代码处的



    <div id="CategorySelector">

        <ul id="CategoryLevel0"/>

        <ul id="CategoryLevel1"/>

        <ul id="CategoryLevel2"/>

    </div>

改成



    <div id="CategorySelector">

        <ul id="CategoryLevel0"></ul>

        <ul id="CategoryLevel1"></ul>

        <ul id="CategoryLevel2"></ul>

    </div>

qhmao 2009-01-04

打赏
举报

<div id="CategorySelector">
<ul id="CategoryLevel0"/>
<ul id="CategoryLevel1"/>
<ul id="CategoryLevel2"/>
</div>

有些太忙了，不好意思，，，，，

qhmao 2009-01-04

打赏
举报

对不起，我小白，，，，，，


<div id="CategorySelector">
<ul id="CategoryLevel0"/>
<ul id="CategoryLevel1"/>
<ul id="CategoryLevel2"/>
<ul id="CategoryLevel3"/>
</div>

烟若辰星 2009-01-04