顯示內聯塊不在同一行顯示div

Question

我的兩個div： form-panel和data-panel不在同一行。 如何使用display:inline-block將它們對齊在同一行中請檢查下面給出的代碼。 我在兩個面板上都使用了display：inline-block，但是兩個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() { var tableData=""; var stage=$("#stage"); $.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>'); }); } $( document ).ready(function() { $( "#sfrm" ).on( "submit", function( event ) { event.preventDefault(); showValues(); }); function showValues() { var str = $( "form" ).serializeArray(); var dateArr = str[1].value.split('-'); dateArr.push(dateArr.shift()); var date=dateArr.join('/') $( "#stage" ).prepend( '<tr><td> ' + str[0].value + '</td>'+'<td> ' + date + '</td>'+'<td style="width:30px;"></td><td> ' + str[2].value + '</td></tr>'); } });

 body{ margin: 0px; padding: 0px; font-family: arial; } .background_panel{ width: 1024px; margin: 0px auto; background-color: #e2e2e2; padding: 10px; margin-top: 85px; 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"]{ height: 40px; font-size: 16px; width: 90%; border: 1px solid #dedede; background-color: #ececec; border-radius: 6px; } input[type="submit"]{ background-color: #434343; border: 1px solid #ececec; border-radius: 6px; padding: 10px; color: #fff; font-size: 18px; } .content{ position: relative; } .form_panel{ width: 47%; padding: 10px; display: inline-block; background-color: white; } .data_panel{ background-color: white; display: inline-block; width: 48%; padding: 10px; } .clear{ 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{ border-collapse: collapse; border: 3px solid #dedede; border-radius: 6px; } td{ padding: 9px; } tr:nth-child(even){ background-color: #cecece; }

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="author" content="Spino Tutorials" /> <title>Task Tracker</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <body onload="load()"> <div class="background_panel"> <div class="main_header"> <h1>Task Tracker</h1> <span>v2.0</span> </div> <div style="vertical-align:top"> <div class="form_panel"> <h3>Create a Task</h3> <form id="sfrm"> Task Name<br> <input type="text" name="task" ><br><br> Date<br> <input type="date" name="date"><br><br> Assigned To<br> <input type="text" name="assigned" ><br><br> <input type="submit" id="target" value="Submit"> </form> </div> <div class="data_panel"> <h3>Exsisting Tasks</h3> <table id="stage" style="table-layout: fixed; max-height: 350px;"></table> </div> </div> <div class="clear"> </div> </div> </body> <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/functions.js"></script> </html>

Answer 1

將vertical-align: top放在兩個div上，而不是它們的父上。

顯示內聯塊不在同一行顯示div

問題描述

1 個解決方案

解決方案1
1 已采納 2016-04-11 21:36:08

顯示內聯塊不在同一行顯示div

問題描述

1 個解決方案

解決方案1 1 已采納 2016-04-11 21:36:08

解決方案1
1 已采納 2016-04-11 21:36:08