CSSs

[feifeiyaqi3]

问题：
html界面上的目录｛操作｝下面有二个操作｛修改｝｛删除｝，这｛修改｝｛删除｝显示在左边，我想调这二个操作于中间，但是我实现不了，请问怎么办。

1. CSS Sources：

body {
background:#e8f1fa;
color:#333;
font-size:12px;
font-family:宋体, Arial, Helvetica, sans-serif;
text-align:center;
line-height:20px;
}
a img, :link img, :visited img {border: 0;}
table { border-collapse:collapse; }
ul {list-style:none;}
q:before, q:after,blockquote:before, blockquote:after {content: "";}

.bold { font-weight:bold; }
.red,a.red { color:#F00; }
.white,a.white { color:#fff; }

/* Link */
a {color:#285264;}
a:link, a:visited {color:#1e83b7;text-decoration:underline;}
a:hover {color:#1e83b7;text-decoration:underline;}
a.dark {color:#333;}

/* Elements */
h1 {font-size:16px;}
h2 {font-size:14px;}
h3 {font-size:14px;}
h4 {font-size:12px;}
h5 {font-size:12px;}
h6 {font-size:12px;}

small {font-size:11px;}
option{padding-left:5px;}

/* Standard */
.float-left {float:left;}
.float-right {float:right;}
.clear-both {clear:both;}
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.italic { font-style:italic; }
.spacer { height:6px; }

.hide {display:none;}
.show {display:block;}

.small {font-size:11px;font-family:tahoma, mingliu;}
.large {font-size:14px;}
.empty{visibility:hidden;}

.spacer { height:6px; overflow:hidden; }
.relative { position:relative; }

/* Form */
fieldset {border:none;}
input, select { vertical-align:middle; font-size:12px; }
label { color:#666; cursor:pointer; font-weight:bold; }
textarea {border:1px solid #bdc7d8;padding:3px;font-size:12px;overflow:auto;}
select, label, textarea,input { font-family:'lucida grande',tahoma,verdana,arial,simsun,sans-serif; }
.input-text {border:1px solid #bdc7d8;padding:1px;}
.input-checkbox {margin-right:5px;}
.input-file {border:1px solid #bdc7d8;}
.input-button, .input-submit { background-color:#dddddd; border-color:#686868 #686868 #686868 #686868; border-style:solid; border-width:1px; color:#000; cursor:pointer; font-size:12px; padding:2px 15px; text-align:center; }
input.gray { border:1px solid; border-color:#fff #848484 #848484 #fff; background:#f0f0f0; color:#333; }
input.mini {padding:2px;}
input.large {padding:3px 15px;font-size:14px;}

/*clearFix*/
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

/*Page Begin*/
.wrap { text-align:left; width:927px; margin:0px auto; }

#tinyLogo { background:url(Images/tiny_logo.gif) center 25px no-repeat; height:105px; }
#tinyLogo2 { margin-top:20px; background:url(Images/tiny_logo.gif) left center no-repeat; height:105px; }
#tinyLogo2 .welcome { float:right; margin-top:60px; text-align:right; padding:0px 20px; color:#006699; font-weight:bold; }
#tinyBox { background:url(Images/tiny_box_bg.gif); position:relative; }
#tinyBox .header { background:url(Images/tiny_box_head.gif); height:8px; }
#tinyBox .footer { background:url(Images/tiny_box_foot.gif); height:32px; }
#tinyMenuA { list-style:none; padding:0px 20px; position:absolute; left:0px; top:-28px; }
#tinyMenuA li { float:left; display:inline; margin:0px 1px; width:81px; line-height:34px; text-align:center; font-size:14px; font-weight:bold; overflow:hidden; cursor:pointer; }
#tinyMenuA li.common { background:url(Images/tiny_menu_btn_bg.gif) center bottom no-repeat; color:#fff; }
#tinyMenuA li.current { background:url(Images/tiny_menu_btn_current.gif) center bottom no-repeat; color:#3a659a; }
#tinyMenuB { float:right; clear:both; list-style:none; padding:0px 20px; }
#tinyMenuB li { float:left; display:inline; margin:0px 1px; width:77px; line-height:24px; text-align:center; font-size:14px; font-weight:bold; overflow:hidden; cursor:pointer; background:url(Images/tiny_menu_btn2_bg.gif) center bottom no-repeat; color:#fff; }
#tinyBox .boxA { float:left; margin:10px 20px; width:415px; height:265px; padding:3px; border:1px solid #d9d9d9; overflow-x:hidden; overflow-y:auto; }
#tinyBox .boxLogin { float:right; width:350px; height:265px; margin:40px 55px 0px 0px; }
#tinyBox .boxLogin .title { background:url(Images/login_title.gif) center center no-repeat; height:53px; }
#tinyBox .boxLogin ul { list-style:none; }
#tinyBox .boxLogin ul li { margin:10px; }
#tinyBox .boxLogin ul li .input-text { width:250px; height:20px; font-size:16px; }
#tinyBox .boxLogin ul li .vcode { width:100px; }
#tinyBox .boxLogin ul li .input-button { background:url(Images/tiny_btn_bg.gif); width:85px; height:42px; border:none; font-size:14px; font-weight:bold; }
#mdbox { background:url(Images/mdbox_bg.gif); }
#mdbox .lefter { float:left; background:url(Images/mdbox_left.gif); width:6px; height:453px; }
#mdbox .righter { float:right; background:url(Images/mdbox_right.gif); width:6px; height:453px; }
#mdbox .main { margin:0px 10px; }
#boxC { padding:100px; }
#boxC ul { list-style:none; }
#boxC ul li { float:left; display:inline; margin:0px 42px; cursor:pointer; }
#mdbox .main .help { text-align:right; padding:0px 50px; }
#header { height:64px; background:url(Images/header_bg.jpg); }

-----------------------------
主要是这个CSS的设置吧
#righter .ManagerSeprUnitPage { list-style:none; }
#righter .ManagerSeprUnitPage li { float:left; display:inline; margin-left:1px; text-align:center; overflow:hidden; }
#righter .ManagerSeprUnitPage li.colsA { width:115px; display:none; }
#righter .ManagerSeprUnitPage li.colsB { width:290px; }
#righter .ManagerSeprUnitPage li.colsC { width:219px; }
#righter .ManagerSeprUnitPage li.colsD { width:102px; }

#righter .ManagerSeprUnitPage li.colsD a {float:left;display:block;text-align:center;padding:0 10px;}

#righter .ManagerSeprUnitPage li.colFlag { background:#f7f8f2; }
#righter .ManagerSeprUnitPage li em { float:right; display:block; border-left:1px solid #006291; border-right:1px solid #95c7ea; height:26px; margin:3px 0px; }


2. javascript code：

function ManagerSeprUnitPage(p)
{

SkyWareAjax(
//'xml/unitdata.xml',
'SystemManager.aspx',
'action=seprUnitPage&pageID='+ p,

function(r){

var DataList = r.selectSingleNode('DataList').getElementsByTagName('UnitItem');
$('righterTitle').innerHTML = ' <ul class=\"ManagerSeprUnitPage white\"> <li class=\"colsA\"> <em> </em>ID </li> <li class=\"colsB\"> <em> </em>名称 </li> <li class=\"colsC\"> <em> </em>描述 </li> <li class=\"colsD\">操作 </li> </ul>'

var DataListText = ' <ul id=\"ManagerSeprUnitPage\" class=\"ManagerSeprUnitPage\">';
for(i = 0;i < DataList.length; i++) {
if(i % 2 != 0) {
colFlag = ' colFlag';
} else {
colFlag = '';
}

UnitID = DataList[i].selectSingleNode('UnitID').text;
UnitName = DataList[i].selectSingleNode('UnitName').text;
UnitDesc = DataList[i].selectSingleNode('UnitDesc').text;

DataListText += ' <li id=\"LI_'+ UnitID +'_0\" class=\"colsA'+ colFlag +'\">' + UnitID + ' </li>';
DataListText += ' <li id=\"LI_'+ UnitID +'_1\" class=\"colsB'+ colFlag +'\">' + UnitName + ' </li>';
DataListText += ' <li id=\"LI_'+ UnitID +'_2\" class=\"colsC'+ colFlag +'\">' + UnitDesc + ' </li>';
DataListText += ' <li id=\"LI_'+ UnitID +'_3\" class=\"colsD'+ colFlag +'\"> <a href=\"javascript:void(0);\" onclick=\"Dialog(\'unf\',\'修改组织单位\',unitForm(\''+ UnitID +'\',\''+ UnitName +'\',\''+ UnitDesc +'\',0),unitForm(null,null,null,2));\">修改 </a> <a href=\"javascript:void(0);\" onclick=\"ManagerDelUnit(\''+ UnitID + '\');\">删除 </a> </li>';



}
DataListText += ' </ul>';
$('righterBox').innerHTML = DataListText;
var DataStat = r.selectSingleNode('DataStat');
//$('showPage').innerHTML = '当前页码：' + p + ', 总页数：'+ DataStat.selectSingleNode('MaxPage').text;
$('showPage').innerHTML = ShowPage('ManagerSeprUnitPage',DataStat.selectSingleNode('MaxPage').text,p);
$('righterButtons').innerHTML = ' <input type=\"button\" value=\"新增组织单位\" onclick=\"Dialog(\'unf\',\'新增组织单位\',unitForm(null,null,null,0),unitForm(null,null,null,1));\" />';
}
);
}

3.
我个人的方法为：
第一。
dispaly:inline text-align:center;还是原来的样子。

第二。
后来我又加了dispaly:inline text-align:center; padding:5px;还是原来的样子。

第三。
我用margin-left+border-left+padding-left+width+padding-right
+border-right+margin-right倒是变了，但特别不好看。


4.

#righter .ManagerSeprUnitPage li.colsD a {float:left;display:block;text-align:center;padding:0 10px;}也不行的
在firefox还要加上 margin:0 auto;才会居中。
请各位达人帮我看下。谢谢

雅琦

[孟子E章]

你最好简化成一个简单的html+css代码，这样大家才好调试。

[feifeiyaqi3]

谢谢孟兄

[feifeiyaqi3]

现在我的HTM全部是封装在Javascript代码中的，这样打开页面和具体的弹出的那个页面中的操作框框，我打开源码看，里边的Javascript代码不会出现的，在这种情况下，我应该采用什么办法呀。
-----------------

我不知道我的这种表达是否可以让大家明白，我在线等。这个东西半天没有作出来了。
谢谢大家帮忙。

[feifeiyaqi3]

<!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=gb2312" />
<title></title>
<link href="skin/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Js/skyware.core.js"></script>
<script type="text/javascript" src="Js/skyware.system.js"></script>
<script type="text/javascript">
window.onload = function() {
ManagerIntialize();
}
</script>
</head>
<body>
<div id="header" class="wrap">
<div id="logo"></div>
<div id="welcome" class="welcome">，您好，欢迎您来到考务平台！</div>
</div>
<div id="topMenu" class="wrap">
<div id="showDate">2009年6月21日 星期日</div>
<ul id="topMenuBar"></ul>
<div class="clear-both"></div>
</div>
<div id="position" class="wrap"><span>当前位置：组织单位管理</span></div>
<div class="wrap">
<div id="lefter">
<div id="submenu">
<div class="submenutop"></div>
<ul id="submenulist"></ul>
<div class="submenubottom"></div>
</div>
</div>







<div id="righter">
<div id="righterTitle"></div>
<div id="righterBox" class="boxBg">


</div>
<div id="showPage" class="boxBg">1</div>

<div id="righterButtons" class="boxBg">
<ul class="ManagerSeprUnitPage white">
<li class="colsA"><em></em>ID</li>
<li class="colsB"><em></em>名称</li>
<li class="colsC"><em></em>描述</li>
<li class="colsD">操作</li></ul>

<ul id="ManagerSeprUnitPage" class="ManagerSeprUnitPage">


<li id="" class="colsA">unitID</li>

<li id="Li1" class="colsB">UnitName</li>

<li id="Li2" class="colsC">UnitDesc</li>

<li id="Li3" class="colsD">

<a href="javascript:void(0);" onclick="Dialog('unf','修改组织单位',unitForm(''+ UnitID +'',''+ UnitName +'',''+ UnitDesc +'',0),unitForm(null,null,null,2));">修改</a>
<a href="javascript:void(0);" onclick="ManagerDelUnit(''+ UnitID + '');">删除</a></li>';

</ul>
</div>
<div id="righterFooter"></div>
<div id="footer">CopyRight(C) 2009 Beijing Skyware Inc.<br /><a href="http://" target="_blank">aaaaa</a></div>
</div>
</div>
</body>
</html>

[shuangfang]

直接用表格不就可以了吗

[feifeiyaqi3]

no
就因为这个小问题没有达到公司要求辞职

[jiangdongyixia]

可不可以把你封装在Javascript代码中的改成
DataListText += '<span> <li id=\"LI_'+ UnitID +'_3\" class=\"colsD'+ colFlag +'\"> <a href=\"javascript:void(0);\" onclick=\"Dialog(\'unf\',\'修改组织单位\',unitForm(\''+ UnitID +'\',\''+ UnitName +'\',\''+ UnitDesc +'\',0),unitForm(null,null,null,2));\">修改 </a> <a href=\"javascript:void(0);\" onclick=\"ManagerDelUnit(\''+ UnitID + '\');\">删除 </a></li> </span>';

相应的把css中的
#righter .ManagerSeprUnitPage li.colsD a {float:left;display:block;text-align:center;padding:0 10px;}
改成
#righter .ManagerSeprUnitPage span {display:inline; text-align:center; width:102px;}
不知这样可不可以
本来想把｛修改｝｛删除｝单独放在<div>里（且不在<ul>里面）但这样又要修改javascript中的其他代码。。。。。。

[jiangdongyixia]

下面这个css也不要了
#righter .ManagerSeprUnitPage li.colsD { width:102px; }