CSS input button 的问题

布鲁克斯南南 2013-11-04 10:34:19
直接代码吧


//----------------------------------------------------------------------------------------
<!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>

<style type="text/css"> //###

	



tbody {color:green;height:50px text-align:center}



table

  {

  border-collapse:collapse;

  height:20px;

  }



table, td, th

  {

  border:1px solid green;

  }

td

{

text-align:center;

height:25px;

}

th 

{

	color:green height:50px

   background-color:green;



}



</style>  //####

<script type="text/javascript">

function createData(){

var a={};

for(var i=0;i<256;i++){

a[i+".name"]=i+"name";

a[i+".age"]=i+'age';

a[i+".sex"]=((i&1)==0?'男':'女');

}

return a;

}

function createTable(){

for(var i=0;i<=19;i++){

var tr=document.createElement("tr");

for(var j=0;j<=2;j++){

tr.appendChild(document.createElement("td"));

}

document.getElementById("data").appendChild(tr);

}

}

function findData(x,data){

var tds=document.getElementsByTagName("td");

var j=0;

for(var i=(x-1)*20;i<x*20;i++){

tds[j++].innerHTML=data[i+'.name'];

tds[j++].innerHTML=data[i+'.age'];

tds[j++].innerHTML=data[i+'.sex'];

}

}

window.onload=function(){

var data=createData();

var isInit=false;

var f=document.getElementById("find");

var p=document.getElementById("page");

var n=document.getElementById("next");

var r=document.getElementById("pre");

f.onclick=function(){

if(!isInit){

createTable();

p.value=1;

isInit=true;

}

findData(p.value,data);

}

r.onclick=function(){

if(!isInit){

createTable();

p.value=1;

isInit=true;

}else{

p.value=parseInt(p.value)-1;

}

findData(p.value,data);

}

n.onclick=function(){

if(!isInit){

createTable();

isInit=true;

p.value=1;

}else{

p.value=parseInt(p.value)+1;

}

findData(p.value,data);

}

}

</script>

</head>



<body>

<div id="test">

<table>

    	<tbody id="data">

        	<tr>

            	<th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

            </tr>

        </tbody>

    </table>

</div>

<input type="button" value="查询" id="find" />

<input type="button" value="上一页" id="pre" />

<input type="button" value="下一页" id="next" />

当前页<input type="text" value="" id="page">

</body>

</html>


我现在想通过CSS来设置input button的位置到中间，table的已经差不多设置好了，现在就是想让button与table的位置配对一下，怎么设置？
...全文
125 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
布鲁克斯南南 2013-11-05
  • 打赏
  • 举报
 回复
引用 2 楼 zyl_lyr1019 的回复:
<style>
.control{
	width:100px;//这里我是自己写的，你把这个改成你上面table的宽度即可。
	margin:0 auto; //这个可以使这个div模块居中
}
</style>
<div class = "control">
<input type="button" value="查询" id="find" />
<input type="button" value="上一页" id="pre" />
<input type="button" value="下一页" id="next" />
当前页<input type="text" value="" id="page">
</div>
你这样改一下试试！
谢谢，可以了，给分！
布鲁克斯南南 2013-11-05
  • 打赏
  • 举报
 回复
引用 3 楼 hch126163 的回复:
[quote=引用 2 楼 zyl_lyr1019 的回复:] 
<style>
.control{
	width:100px;//这里我是自己写的，你把这个改成你上面table的宽度即可。
	margin:0 auto; //这个可以使这个div模块居中
}
</style>
<div class = "control">
<input type="button" value="查询" id="find" />
<input type="button" value="上一页" id="pre" />
<input type="button" value="下一页" id="next" />
当前页<input type="text" value="" id="page">
</div>
你这样改一下试试！
正解[/quote] 谢谢，可以了，马上结贴，给分！
hch126163 2013-11-05
  • 打赏
  • 举报
 回复
引用 2 楼 zyl_lyr1019 的回复:
<style>
.control{
	width:100px;//这里我是自己写的，你把这个改成你上面table的宽度即可。
	margin:0 auto; //这个可以使这个div模块居中
}
</style>
<div class = "control">
<input type="button" value="查询" id="find" />
<input type="button" value="上一页" id="pre" />
<input type="button" value="下一页" id="next" />
当前页<input type="text" value="" id="page">
</div>
你这样改一下试试！
正解
张运领 2013-11-04
  • 打赏
  • 举报
 回复 
<style>
.control{
	width:100px;//这里我是自己写的，你把这个改成你上面table的宽度即可。
	margin:0 auto; //这个可以使这个div模块居中
}
</style>
<div class = "control">
<input type="button" value="查询" id="find" />
<input type="button" value="上一页" id="pre" />
<input type="button" value="下一页" id="next" />
当前页<input type="text" value="" id="page">
</div>
你这样改一下试试！
布鲁克斯南南 2013-11-04
  • 打赏
  • 举报
 回复
引用 楼主 li875590079 的回复:
直接代码吧


//----------------------------------------------------------------------------------------
<!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>

<style type="text/css"> //###

	



tbody {color:green;height:50px text-align:center}



table

  {

  border-collapse:collapse;

  height:20px;

  }



table, td, th

  {

  border:1px solid green;

  }

td

{

text-align:center;

height:25px;

}

th 

{

	color:green height:50px

   background-color:green;



}



</style>  //####

<script type="text/javascript">

function createData(){

var a={};

for(var i=0;i<256;i++){

a[i+".name"]=i+"name";

a[i+".age"]=i+'age';

a[i+".sex"]=((i&1)==0?'男':'女');

}

return a;

}

function createTable(){

for(var i=0;i<=19;i++){

var tr=document.createElement("tr");

for(var j=0;j<=2;j++){

tr.appendChild(document.createElement("td"));

}

document.getElementById("data").appendChild(tr);

}

}

function findData(x,data){

var tds=document.getElementsByTagName("td");

var j=0;

for(var i=(x-1)*20;i<x*20;i++){

tds[j++].innerHTML=data[i+'.name'];

tds[j++].innerHTML=data[i+'.age'];

tds[j++].innerHTML=data[i+'.sex'];

}

}

window.onload=function(){

var data=createData();

var isInit=false;

var f=document.getElementById("find");

var p=document.getElementById("page");

var n=document.getElementById("next");

var r=document.getElementById("pre");

f.onclick=function(){

if(!isInit){

createTable();

p.value=1;

isInit=true;

}

findData(p.value,data);

}

r.onclick=function(){

if(!isInit){

createTable();

p.value=1;

isInit=true;

}else{

p.value=parseInt(p.value)-1;

}

findData(p.value,data);

}

n.onclick=function(){

if(!isInit){

createTable();

isInit=true;

p.value=1;

}else{

p.value=parseInt(p.value)+1;

}

findData(p.value,data);

}

}

</script>

</head>



<body>

<div id="test">

<table>

    	<tbody id="data">

        	<tr>

            	<th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

            </tr>

        </tbody>

    </table>

</div>

<input type="button" value="查询" id="find" />

<input type="button" value="上一页" id="pre" />

<input type="button" value="下一页" id="next" />

当前页<input type="text" value="" id="page">

</body>

</html>


我现在想通过CSS来设置input button的位置到中间，table的已经差不多设置好了，现在就是想让button与table的位置配对一下，怎么设置？


目前的样子是这样的，刚刚接触web 太多东西要学了，目前水平很有限，希望会的人指导下！
CSS 美化 input button 按钮
input、button可以通过CSS自定义外观，而checkbox radio则没办法通过CSS自定义样式。今天逛GOOGLE+的时候发现了一个利用CSS3伪元素:after来自定义checkbox radio样式的方法。利用CSS3不仅可以自定义checkbox radio的...
css：input button常用属性以及将button嵌入到input中
//css属性 cursor:pointer; 2、清除button默认边框 border: none; 3、清除input默认边框 outline: 0; 4、设置input中的默认值以及更改其中的样式 //输入框中的默认值 <input type="text" placeholder="请输入...
css 输入框 按钮 对齐,CSS让input button元素对齐的代码收集
收集一些用CSs控制INPUT/BUTTON等网页元素与文字对齐的实用小代码，细心的朋友会发现，如果前面一个INPUT，后边是文字的话，你会发现文字和输入框在垂直方向上不是对齐的，影响页面美观，因此本页的代码收集的包括了...
CSS中button和input的通用样式，建议收藏！
一、button通用样式 .login-button { /* 按钮美化 */ width: 270px; /* 宽度 */ height: 40px; /* 高度 */ border-width: 0px; /* 边框宽度 */ border-radius: 3px; /* 边框半径 */ background: #1E90FF; /* 背景...
CSS：input和button放在同一行
给左边的控件添上一句 float:left; <style> #txtTask{ float:left; min-width:85%; } </style> html： <input type="text" id="txtTask" class="form-con...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章