现在，我看到我的tab div比我的grid div（右边）大约大2 px--用红色圈出。我该如何修改HTML标记或CSS，使我的tab和grid div整齐地堆叠在一起，使它们排成一行呢？
我已附上问题的PIC以及预期结果：
下面是我们讨论的CSS和HTML：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>MRSP Accomodations Manager</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="stylesheet" href="/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/scripts/jqxcore.js"></script>
<script type="text/javascript" src="/scripts/jqxbuttons.js"></script>
<script type="text/javascript" src="/scripts/jqxscrollbar.js"></script>
<script type="text/javascript" src="/scripts/jqxmenu.js"></script>
<script type="text/javascript" src="/scripts/jqxgrid.js"></script>
<script type="text/javascript" src="/scripts/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/scripts/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="/scripts/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source = {
datatype: "json",
datafields: [
{ name: 'LastName' },
{ name: 'FirstName' },
{ name: 'Floor', type: 'int' },
{ name: 'Office' }
],
id: 'id',
url: 'compile_data.asp'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#grid").jqxGrid({
width: '100%',
height: '100%',
source: dataAdapter,
columnsresize: true,
columns: [
{ text: '<b>LastName</b>', datafield: 'LastName', width: 250 },
{ text: '<b>FirstName</b>', datafield: 'FirstName', width: 150 },
{ text: '<b>Floor</b>', datafield: 'Floor', width: 180 },
{ text: '<b>Office</b>', datafield: 'Office', width: 120 }
]
});
});
</script>
<style>
* {
font-family: Segoe UI;
font-size: 10.5pt;
margin:0;
padding:0;
}
.jqx-grid {
border-radius: 0 !important;
}
body {
height:100%;
}
header {
background-color: rgb(93,90,88);
color: white;
border: 0;
margin:0;
line-height: 25px;
padding-left: 2px;
}
footer {
position:absolute;
bottom:0;
margin:0;
border:0;
line-height:25px;
background-color: rgb(93,90,88);
width:100%;
color: #FFF;
padding-left: 2px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
#wrapper {
position:absolute;
width:100%;
margin:0;
}
#topbar {
line-height: 30px;
padding-left: 2px;
background-color: rgb(216,216,216);
color: rgb(76,83,92);
}
.center {
margin: auto;
border: 3px solid #73AD21;
padding: 10px;
}
.input_txt_search {
background: url(icons/search.png) no-repeat right;
background-size: 16px;
border: 1px solid rgb(171,173,179);
padding: 2px;
width: 200px;
background-color: #FFF;
}
.input_txt {
border: 1px solid rgb(171,173,179);
padding: 2px;
width: 200px;
}
.input_txt:hover, .input_txt_search:hover, .selectbox:hover {
border-color: rgb(93,90,88);
}
.selectbox {
width: 206px;
padding: 2px;
border: 1px solid rgb(171,173,179);
background: url(icons/arrow.png) no-repeat right #fff;
-webkit-appearance: none;
background-position-x: 182px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-background-clip: text;
color: white !important;
}
</style>
<style>
p {
margin: 0 0 20px;
line-height: 1.5;
}
.main {
margin: 0 auto;
width: 100%;
}
.content {
background: #fff;
border: 1px solid rgb(171,173,179);
}
.content>div {
display: none;
padding: 20px 25px 5px;
}
input[name="tabs"] {
display: none;
}
label {
display: inline-block;
text-align: center;
background-color: rgb(240, 240, 240);
border-top: 1px solid rgb(171,173,179);
border-left: 1px solid rgb(171,173,179);
border-right: 1px solid rgb(171,173,179);
width: 115px;
padding: 10px;
}
label:hover {
cursor: pointer;
background: rgb(196,196,196);
}
input[name="tabs"]:checked+label {
background: #fff;
color: #000;
border-top: 1px solid rgb(171,173,179);
border-left: 1px solid rgb(171,173,179);
border-right: 1px solid rgb(171,173,179);
border-bottom: 0px;
position: relative;
font-weight: bold;
}
input[name="tabs"]:checked+label::before {
content: '';
position: absolute;
width: 100%;
height: 1px;
background: #fff;
bottom: -1px;
right: 0;
left: 0;
margin: auto;
}
#tab1:checked~.content #content1,
#tab2:checked~.content #content2,
#tab3:checked~.content #content3,
#tab4:checked~.content #content4 {
display: block;
}
</style>
<%
sub add_new
Dim strSQL
strSQL = "INSERT INTO tbl_offices " & _
"(LastName, FirstName, Floor, Office) " & _
" VALUES (" & _
"'" & Request.Form("LastName") & "', " & _
"'" & Request.Form("FirstName") & "', " & _
"'" & Request.Form("Floor") & "', " & _
"'" & Request.Form("Office") & "' " & _
")"
Response.Write(strSQL)
end sub
%>
</head>
<body>
<header>MRSP Accomodations Manager</header>
<div id="wrapper">
<div id="topbar">
<form name="GO" method="post">
<input type="text" name="Search" class="input_txt_search" />
<input type = "submit" name="GO" value="GO"/>
<input type = "submit" name="Test" value="Test" onclick="test()"/>
</form>
<%
if Request.Form("GO") = "GO" then
search
End If
%>
</div><!-- End of DIV Wrapper -->
<div class="center">
<div id="content">
<div class="main">
<input id="tab1" type="radio" name="tabs" checked><label for="tab1">Office Info</label>
<input id="tab2" type="radio" name="tabs"><label for="tab2">Employee Info</label>
<input id="tab3" type="radio" name="tabs"><label for="tab3">Service Requests</label>
<input id="tab4" type="radio" name="tabs"><label for="tab4">Tokyo</label>
<div class="content">
<div id="content1">
<form method="post">
<table style="border-collapse: separate; border-spacing: 5px;">
<tr>
<td>FirstName:</td>
<td><input type="text" name="FirstName" class="input_txt" /></td>
</tr>
<tr>
<td>LastName:</td>
<td><input type="text" name="LastName" class="input_txt" /></td>
</tr>
<tr>
<td>Floor:</td>
<td><input type="text" name="Floor" class="input_txt"/></td>
</tr>
<tr>
<td>Office:</td>
<td><input type="text" name="Office" class="input_txt"/></td>
</tr>
<tr>
<td>Options:</td>
<td>
<select class="selectbox">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</td>
</tr>
<tr>
<td><input type = "submit" name="Submit" value = "Submit"/></td>
<td> </td>
</tr>
</table>
</form>
<%
If Request.Form("Submit") <> "" then
add_new
End If
%>
</div>
<div id="content2">
<p>
London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
<p>
London's ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2) mediaeval boundaries and in 2011 had a resident population of 7,375, making it the smallest city in England. Since at least the 19th century, the term London has
also referred to the metropolis developed around this core.
</p>
</div>
<div id="content3">
<p>
Mumbai is the capital city of the Indian state of Maharashtra. It is the most populous city in India, most populous metropolitan area in India, and the eighth most populous city in the world, with an estimated city population of 18.4 million and metropolitan
area population of 20.7 million as of 2011. Along with the urban areas, including the cities of Navi Mumbai, Thane, Bhiwandi, Kalyan, it is one of the most populous urban regions in the world.
</p>
<p>
Mumbai lies on the west coast of India and has a deep natural harbour. In 2009, Mumbai was named an alpha world city. It is also the wealthiest city in India, and has the highest GDP of any city in South, West or Central Asia.
</p>
</div>
<div id="content4">
<p>
Tokyo, officially Tokyo Metropolis, is one of the 47 prefectures of Japan. Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial
Palace, and the home of the Japanese Imperial Family.
</p>
<p>
Tokyo is in the Kantō region on the southeastern side of the main island Honshu and includes the Izu Islands and Ogasawara Islands. Tokyo Metropolis was formed in 1943 from the merger of the former Tokyo Prefecture and the city of Tokyo.
</p>
</div>
</div>
</div>
<div id="grid"></div>
</div><!-- END OF DIV #CONTENT-->
</div><!-- END OF DIV #CENTER -->
</div><!-- END OF DIV #WRAPPER -->
<footer>User: KELLYJ</footer>
</body>
</html>
1条答案
按热度按时间wgx48brx1#
您可以尝试将以下CSS应用到您的网格div：
您可以在代码片段中看到结果。
希望能有所帮助！
x一个一个一个一个x一个一个二个一个x一个一个三个一个