0
我的兩個div：form-panel和data-panel不在同一行中。如何使用display:inline-block將它們對齊在同一行中請檢查下面給出的代碼。我在兩個面板上都使用了display：inline-block，但兩個div的對齊方式仍然不同。顯示行內塊不顯示在同一行中的div
var data=[
{"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"}
];
function load() {
\t var tableData="";
\t var stage=$("#stage");
\t $.each(data,function(i){
stage.prepend('<tr><td> ' + data[i].name + '</td>'+'<td> ' + data[i].date+ '</td>'+'<td style="width:30px;"></td><td> ' + data[i].assigned+ '</td></tr>');
\t });
}
$(document).ready(function() {
$("#sfrm").on("submit", function(event) {
\t event.preventDefault();
\t showValues();
});
function showValues() {
var str = $("form").serializeArray();
var dateArr = str[1].value.split('-');
\t dateArr.push(dateArr.shift());
\t var date=dateArr.join('/')
\t $("#stage").prepend('<tr><td> ' + str[0].value + '</td>'+'<td> ' + date + '</td>'+'<td style="width:30px;"></td><td> ' + str[2].value + '</td></tr>');
}
});body{
\t margin: 0px;
\t padding: 0px;
\t font-family: arial;
}
.background_panel{
\t width: 1024px;
\t margin: 0px auto;
\t background-color: #e2e2e2;
\t padding: 10px;
\t margin-top: 85px;
\t overflow: auto;
}
h1{
position: relative;
z-index: 1;
margin-bottom: 0;
}
.main_panel{
background-color: #ffffff;
padding: 10px;
position: relative;
}
input[type="text"],input[type="date"]{
\t height: 40px;
\t font-size: 16px;
\t width: 90%;
\t border: 1px solid #dedede;
\t background-color: #ececec;
\t border-radius: 6px;
}
input[type="submit"]{
\t background-color: #434343;
\t border: 1px solid #ececec;
\t border-radius: 6px;
\t padding: 10px;
\t color: #fff;
\t font-size: 18px;
}
.content{
\t position: relative;
}
.form_panel{
\t width: 47%;
\t padding: 10px;
\t display: inline-block;
\t background-color: white;
}
.data_panel{ \t
\t background-color: white;
\t display: inline-block;
\t width: 48%;
\t padding: 10px;
}
.clear{
\t clear: left;
}
.main_header{
border: 1px solid #f0f0f0;
min-height: 120px;
background-color: #f0f0f0;
z-index: 1;
padding: 10px;
}
hr{
width: 3px;
height: 370px;
position: absolute;
left: 490px;
background-color: #f0f0f0;
border: 1px solid #f0f0f0;
border-radius: 5px;
top: -12px;
}
table{
\t border-collapse: collapse;
\t border: 3px solid #dedede;
\t border-radius: 6px;
}
td{
\t padding: 9px;
}
tr:nth-child(even){
\t background-color: #cecece;
}<!doctype html>
<html lang="en">
<head>
\t <meta charset="utf-8"/>
<meta name="author" content="Spino Tutorials" />
\t <title>Task Tracker</title>
\t <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body onload="load()">
<div class="background_panel">
\t <div class="main_header">
\t \t <h1>Task Tracker</h1>
\t \t <span>v2.0</span>
\t </div>
\t <div style="vertical-align:top">
\t \t <div class="form_panel">
\t \t \t <h3>Create a Task</h3>
\t \t \t <form id="sfrm">
\t \t \t \t Task Name<br>
\t \t \t \t <input type="text" name="task" ><br><br>
\t \t \t \t Date<br>
\t \t \t \t <input type="date" name="date"><br><br>
\t \t \t \t Assigned To<br>
\t \t \t
\t \t \t \t <input type="text" name="assigned" ><br><br>
\t \t \t \t <input type="submit" id="target" value="Submit">
\t \t \t </form>
\t \t </div>
\t \t <div class="data_panel">
\t \t \t <h3>Exsisting Tasks</h3>
\t \t \t <table id="stage" style="table-layout: fixed; max-height: 350px;"></table>
\t \t </div>
\t </div>
\t <div class="clear">
\t \t
\t </div>
</div>
</body>
\t <script src="js/jquery.min.js"></script>
\t <script type="text/javascript" src="js/functions.js"></script>
</html>
this div''也許還需要'inline-block' – ewizard