61,112
社区成员
发帖
与我相关
我的任务
分享HTML 用DIV如何调整边框变更一个，不让重叠
<!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>
...全文
请发表友善的回复…
发表回复
一只小小小鱼 2017-11-30
- 打赏
- 举报
也可以用表格
一只小小小鱼 2017-11-30
- 打赏
- 举报
.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;
}
