使用自定义边框间距修复布局
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(document).ready(function(){
var $ul=$("#task-list");
var taskList=[
{
"name":"Test Task #1",
"date":"12/01/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #2",
"date":"12/02/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #3",
"date":"12/03/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #4",
"date":"12/04/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #5",
"date":"12/05/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #6",
"date":"12/06/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #7",
"date":"12/07/2012",
"assigned":"John Doe"
}
];
var stackTask=function (task){
taskList.push(task);
};
var renderTask=function (task){
var li='<li><span class="task-name"> '+task.name+ '</span> <span class="task-date">'+task.date+'</span> <span class="task-assigned">'+ task.assigned+'</span></li>';
return li;
}
$.each(taskList, function(i, task) {
$ul.append(renderTask(task));
});
$('#form-task').submit(function(event){
event.preventDefault();
var name=$("#txt_name");
var date=$("#txt_date");
var assignedTo=$("#txt_assigned_to");
$.each($('input[type="text"]'), function() {
if ($(this).val()=='') {
$(this).addClass('form-error');
}else {
$(this).removeClass('form-error');
}
});
var task={
"name":name.val(),
"date":date.val(),
"assigned":assignedTo.val()
};
if ($('.form-error').length==0) {
stackTask(task);
$ul.prepend(renderTask(task));
name.val("");
date.val("");
assignedTo.val("");
}
});
});body{
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 14px;
background-color: #fff;
}
.container{
background-color: #f0f0f0;
}
.header h1 {
font-size:28px;
margin:0px;
}
.header h4 {
color:#676767;
font-size: 16px;
margin:0px;
}
.header {
display:block;
padding: 5px;
border: 10px solid #e2e2e2;
border-bottom: none;
}
.content{
position: relative;
height: 100%; /*important for equal height columns*/
width: 99%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 50px; /*This needs to match footer height*/
overflow: auto;
margin-left: 10px;
border-spacing: 5px;
border-spacing-
}
.col1-content {
padding-left: 10px;
}
.col1{
background-color: #fff;
width: 50%;
margin: 10px;
vertical-align: top;
padding-top: 20px;
padding-right: 10px;
display: table-cell;
}
.col2 {
background-color: #fff;
padding: 10px;
display: table-cell; /*To make sibling columns equal in height*/
margin-bottom:10px;
}
.content h4 {
font-family: Georgia, serif;
font-size: 16px;
}
input[type="text"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #dedede;
line-height: 24px;
padding: 5px 10px;
background-color:#ececec;
width:90%;
}
.form-error {
border:1px solid red !important;
}
.form-row {
display: block;
padding:10px 0px;
}
.form-row label {
display: block;
padding-bottom: 5px;
}
.btn {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #000;
padding:10px 15px;
font-family: Georgia, serif;
font-size: 16px;
background-color: #434343;
color: #fff;
}
.btn:hover {
cursor: pointer;
background-color: #303030;
}
#task-list{
border:4px solid #dedede;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
list-style: none;
margin:0;
padding:0;
}
#task-list li {
margin:0;
padding:10px 20px;
}
#task-list li:nth-child(even) {
background-color: #ececec;
}
#task-list li:nth-child(odd) {
background-color: #fff;
}
.task-name {
font-family: Georgia, serif;
font-weight: bold;
}
.task-date {
color:#666666;
}
.task-assigned {
float:right;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<h1>Task Tracker</h1>
<h4>v2.0</h4>
</div>
<div class="content">
<div class="col1">
<div class="col1-content">
<h4>Create a Task</h4>
<form method="post" action="" id="form-task">
<div class="form-row">
<label for="txt_name">Task Name</label>
<input type="text" name="txt_name" id="txt_name">
</div>
<div class="form-row">
<label for="txt_date">Date</label>
<input type="text" name="txt_date" id="txt_date">
</div>
<div class="form-row">
<label for="txt_assigned_to">Assigned To</label>
<input type="text" name="txt_assigned_to" id="txt_assigned_to">
</div>
<div class="form-row">
<input type="submit" name="submit" class="btn" value="Submit">
</div>
</form>
</div>
</div>
<div class="col2">
<h4>Existing Tasks</h4>
<ul id="task-list"></ul>
</div>
</div>
</div>
这是输出：
border-spacing导致标题边框不接触.content div。
我的输出应如下所示：
我该如何解决这个问题？
1 个答案:
答案 0 :(得分：1)
border-spacing应该能够获取2个值（水平/垂直）
border-spacing: 5px 0;
下面的测试片段检查出来
$(document).ready(function(){
var $ul=$("#task-list");
var taskList=[
{
"name":"Test Task #1",
"date":"12/01/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #2",
"date":"12/02/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #3",
"date":"12/03/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #4",
"date":"12/04/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #5",
"date":"12/05/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #6",
"date":"12/06/2012",
"assigned":"John Doe"
},
{
"name":"Test Task #7",
"date":"12/07/2012",
"assigned":"John Doe"
}
];
var stackTask=function (task){
taskList.push(task);
};
var renderTask=function (task){
var li='<li><span class="task-name"> '+task.name+ '</span> <span class="task-date">'+task.date+'</span> <span class="task-assigned">'+ task.assigned+'</span></li>';
return li;
}
$.each(taskList, function(i, task) {
$ul.append(renderTask(task));
});
$('#form-task').submit(function(event){
event.preventDefault();
var name=$("#txt_name");
var date=$("#txt_date");
var assignedTo=$("#txt_assigned_to");
$.each($('input[type="text"]'), function() {
if ($(this).val()=='') {
$(this).addClass('form-error');
}else {
$(this).removeClass('form-error');
}
});
var task={
"name":name.val(),
"date":date.val(),
"assigned":assignedTo.val()
};
if ($('.form-error').length==0) {
stackTask(task);
$ul.prepend(renderTask(task));
name.val("");
date.val("");
assignedTo.val("");
}
});
});body{
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 14px;
background-color: #fff;
}
.container{
background-color: #f0f0f0;
}
.header h1 {
font-size:28px;
margin:0px;
}
.header h4 {
color:#676767;
font-size: 16px;
margin:0px;
}
.header {
display:block;
padding: 5px;
border: 10px solid #e2e2e2;
border-bottom: none;
}
.content{
position: relative;
height: 100%; /*important for equal height columns*/
width: 99%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 50px; /*This needs to match footer height*/
overflow: auto;
margin-left: 10px;
border-spacing: 5px 0;
}
.col1-content {
padding-left: 10px;
}
.col1{
background-color: #fff;
width: 50%;
margin: 10px;
vertical-align: top;
padding-top: 20px;
padding-right: 10px;
display: table-cell;
}
.col2 {
background-color: #fff;
padding: 10px;
display: table-cell; /*To make sibling columns equal in height*/
margin-bottom:10px;
}
.content h4 {
font-family: Georgia, serif;
font-size: 16px;
}
input[type="text"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #dedede;
line-height: 24px;
padding: 5px 10px;
background-color:#ececec;
width:90%;
}
.form-error {
border:1px solid red !important;
}
.form-row {
display: block;
padding:10px 0px;
}
.form-row label {
display: block;
padding-bottom: 5px;
}
.btn {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #000;
padding:10px 15px;
font-family: Georgia, serif;
font-size: 16px;
background-color: #434343;
color: #fff;
}
.btn:hover {
cursor: pointer;
background-color: #303030;
}
#task-list{
border:4px solid #dedede;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
list-style: none;
margin:0;
padding:0;
}
#task-list li {
margin:0;
padding:10px 20px;
}
#task-list li:nth-child(even) {
background-color: #ececec;
}
#task-list li:nth-child(odd) {
background-color: #fff;
}
.task-name {
font-family: Georgia, serif;
font-weight: bold;
}
.task-date {
color:#666666;
}
.task-assigned {
float:right;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<h1>Task Tracker</h1>
<h4>v2.0</h4>
</div>
<div class="content">
<div class="col1">
<div class="col1-content">
<h4>Create a Task</h4>
<form method="post" action="" id="form-task">
<div class="form-row">
<label for="txt_name">Task Name</label>
<input type="text" name="txt_name" id="txt_name">
</div>
<div class="form-row">
<label for="txt_date">Date</label>
<input type="text" name="txt_date" id="txt_date">
</div>
<div class="form-row">
<label for="txt_assigned_to">Assigned To</label>
<input type="text" name="txt_assigned_to" id="txt_assigned_to">
</div>
<div class="form-row">
<input type="submit" name="submit" class="btn" value="Submit">
</div>
</form>
</div>
</div>
<div class="col2">
<h4>Existing Tasks</h4>
<ul id="task-list"></ul>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？