HTML 用DIV如何调整边框变更一个,不让重叠

忆寒哥哥耶 213123 程序员  2017-11-28 01:19:18

<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h5="http://xmlns.jcp.org/jsf/passthrough">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>云朵信息化 | 工作台</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<!--Bootstrap 3.3.7-->
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css" />
<!--Font Awesome-->
<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css" />
<!--Ionicons-->
<link rel="stylesheet" href="plugins/ionicons/css/ionicons.min.css" />
<!--Theme style-->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css" />
<!--iCheck-->
<link rel="stylesheet" href="plugins/iCheck/square/blue.css" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">

* {
font-family:"\5B8B\4F53";
font-size: 12px;
text-align:center;
margin: 0;
padding:0;

}
.box-body1{
display:table;
width:90mm;
height:90mm;
margin-left: 5mm;
margin-top: 5mm;
padding:0;
}
.box-body{
display:table;
width:90mm;
height:90mm;
position: relative;
margin-left: 5mm;
margin-top: 10mm;
top: 5mm;
padding:0;
}
.row{
margin-left: 0;
width:90mm;
height:10mm;
position: relative;
/*border: 1px red solid;box-sizing:border-box;*/
}
.control-label{
border: 1px black solid;box-sizing:border-box;
float: left;
width:45mm;
height:10mm;
position: absolute;
left: 0mm;
margin: 0;
}
.input-group{
border: 1px black solid;box-sizing:border-box;
/*float: right;*/
width:45mm;
height:10mm;
position: absolute;
left:45mm;
}
@media print{
* {
font-family:"\5B8B\4F53";
font-size: 12px;
text-align:center;
margin: 0;
padding:0;
box-sizing: border-box;
}
.box-body1{
display:table;
width:90mm;
height:90mm;
margin-left: 5mm;
margin-top: 5mm;
padding:0;
}
.box-body{
display:table;
width:90mm;
height:90mm;
position: relative;
margin-left: 5mm;
margin-top: 10mm;
top: 5mm;
padding:0;
}
.row{
margin-left: 0;
width:90mm;
height:10mm;
position: relative;
border: 1px red solid;
}
.control-label{
border: 1px black solid;
float: left;
width:45mm;
height:10mm;
position: absolute;
left: 0mm;
}
.input-group{
border: 1px black solid;
/*float: right;*/
width:45mm;
height:10mm;
position: absolute;
left:45mm;
}

}
</style>
</head>
<body class="hold-transition">
<form>
<!--工具栏-->
<div class="box-header">
<div class="section">
<a href="./"><i class="fa fa-home"></i>工作台/</a>
<span class="box-title">功能标题</span>
</div>
<div class="yunduoerp-toolbar">
<button class="btn btn-primary btn-sm ">
<span class="fa fa-file fa-fw" />新增
</button>
<button class="btn btn-primary btn-sm ">
<span class="fa fa-save fa-fw" />保存
</button>
<div class="btn btn-primary btn-sm" id="print" >
<span class="fa fa-print fa-fw" />打印
</div>
<div class="btn btn-primary btn-sm print-preview" id="print-preview" >
<span class="fa fa-print fa-fw" />预览
</div>
<button class="btn btn-primary btn-sm ">
<span class="fa fa-reply fa-fw" />返回
</button>
</div>
</div>



<div class="box box-primary with-border">
<div class="box-body1">
<div class="row">
<label class="control-label">中国1</label>
<div class="input-group">input1</div>
</div>



<div class="row">
<label class="control-label">中国2</label>
<div class="input-group">6662</div>
</div>
<div class="row">
<label class="control-label">中国3</label>
<div class="input-group">6663</div>
</div>
</div>
<div class="box-body">
<div class="row">
<label class="control-label">赵江鹏1</label>
<div class="input-group">1</div>
</div>
<div class="row">
<label class="control-label">label2</label>
<div class="input-group">input2</div>
</div>
<div class="row">
<label class="control-label">label3</label>
<div class="input-group">input3</div>
</div>
</div>
</div>
</form>
<!--jQuery 3-->
<script src="plugins/jQuery/jquery.min.js"></script>
<!--Bootstrap 3.3.7-->
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!--iCheck-->
<script src="plugins/iCheck/icheck.min.js"></script>
<script src="plugins/qrcode/qrcode.js" type="text/javascript"></script>
<script src="plugins/jQuery-autocomplete/jquery.autocomplete.min.js" type="text/javascript"></script>
<script src="plugins/jQuery-print/jQuery.printThis.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#print").click(function () {
$(".box").printThis({
importStyle: true
});
});
});
</script>
</body>
</html>

...全文
327 2 点赞 打赏 收藏 举报
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
也可以用表格
  • 打赏
  • 举报
回复
.control-label{ border: 1px black solid; border-right:none; border-bottom:none; box-sizing:border-box; float: left; width:45mm; height:10mm; position: absolute; left: 0mm; margin: 0; } .box-body1 .row:last-child .control-label{ border-bottom: 1px black solid; } .box-body1 .row:last-child .input-group{ border-bottom: 1px black solid; } .input-group{ border: 1px black solid; border-bottom:none; box-sizing:border-box; /*float: right;*/ width:45mm; height:10mm; position: absolute; left:45mm; }
  • 打赏
  • 举报
回复
相关推荐
发帖
CSS
加入

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2017-11-28 01:19
社区公告
暂无公告