-2
我有一個div和一個表格，我希望將它們並排顯示。經過幾次嘗試，我仍然無法做到這一點。 div（導航欄）將位於左上角，而表格位於右下角。並排顯示div和表格
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylenav.css" />
<link rel="stylesheet" type="text/css" href="styletable.css" />
</head>
<body bgcolor="#13b4ff">
<div id="nav">
<ul>
<br>
<li><a href="#">Home</a></li>
<li><a href="#">New</a></li>
<li><a href="#">Validation</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
<table id='display'>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>POSITION</th>
<th>UNIT</th>
<th>DEPARTMENT</th>
<th>NO.TELEFON</th>
<th>NO.FAKS</th>
<th>E-MAIL</th>
<th>DATA</th>
<th>REASON</th>
</tr>
</thead>
<tbody>
<?php
$connect = mysql_connect("localhost","root","");
if (!$connect){
die(mysql_error());
}
mysql_select_db("permohonan_data");
$results = mysql_query("SELECT * FROM pemohon");
while ($row = mysql_fetch_array($results)){
?>
<tr>
<td><?php echo $row['id']?></td>
<td><?php echo $row['name']?></td>
<td><?php echo $row['postion']?></td>
<td><?php echo $row['unit']?></td>
<td><?php echo $row['department']?></td>
<td><?php echo $row['telefon']?></td>
<td><?php echo $row['faks']?></td>
<td><?php echo $row['email']?></td>
<td><?php echo $row['data']?></td>
<td><?php echo $row['reason']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</body>
</html>
DIV + CSS：
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
div#nav {
list-style: none;
font-weight: bold;
margin-bottom: 0 auto;
width: 160px;
float: left;
background-color: #000000;
height: 100%;
}
div#nav ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
}
div#nav li a {
text-align: center;
margin: 60px 0px -30px 0;
display: block;
padding: 20px;
border: solid 3px #FFFFFF;
text-decoration: none;
font-weight: bold;
color: #000000;;
background-color: #7a84d3;
display: right-block;
}
div#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
表CSS：
table#display{
float:right;
margin:0px;
padding:0px;
width: 300px ;
box-shadow: 7px 7px 2px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:9px;
-webkit-border-bottom-left-radius:9px;
border-bottom-left-radius:9px;
-moz-border-radius-bottomright:9px;
-webkit-border-bottom-right-radius:9px;
border-bottom-right-radius:9px;
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-right-radius:9px;
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
}
table#display table{
width: 0 ;
height: 0 ;
margin: 0 ;
padding: 0 ;
}
table#display th{
padding: 5px;
}
table#display tr:hover td{
background-color:#82c0ff;
background:-o-linear-gradient(bottom, #82c0ff 5%, #56aaff 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #82c0ff), color-stop(1, #56aaff));
background:-moz-linear-gradient(center top, #82c0ff 5%, #56aaff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#82c0ff", endColorstr="#56aaff");
background: -o-linear-gradient(top,#82c0ff,56aaff);
}
table#display tr:first-child {
background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff));
background:-moz-linear-gradient(center top, #0069d3 5%, #007fff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff");
background: -o-linear-gradient(top,#0069d3,007fff);
background-color:#0069d3;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Times New Roman;
font-weight:bold;
color:#ffffff;
}
table#display tr:first-child:hover {
background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff));
background:-moz-linear-gradient(center top, #0069d3 5%, #007fff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff");
background: -o-linear-gradient(top,#0069d3,007fff);
background-color:#0069d3;
}
table#display tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
table#display tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
table#display td{
background:-o-linear-gradient(bottom, #56aaff 5%, #82c0ff 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #56aaff), color-stop(1, #82c0ff));
background:-moz-linear-gradient(center top, #56aaff 5%, #82c0ff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#56aaff", endColorstr="#82c0ff");
background: -o-linear-gradient(top,#56aaff,82c0ff);
background-color:#56aaff;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:14px;
font-family:Times New Roman;
color:#000000;
}
table#display tr:last-child td{
border-width:0px 1px 0px 0px;
}
table#display tr td:last-child{
border-width:0px 0px 1px 0px;
}
table#display tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
我知道有一些錯誤的代碼，但我不知所措因爲我明白我是什麼失蹤。
你可以把這個在jsfiddle.net或類似的東西，並試圖縮小下來只是爲了的一部分不起作用的代碼 – Andrew
您是否嘗試將它們都放入div中，然後將顯示設置爲顯示：inline-block; ？ – BuddhistBeast
你能解釋一下你想要的菜單在左邊，桌子在右邊底部？ –