我的 html 页面存在一些格式问题。标题按预期出现在两列中，但它们没有显示足够的间距。此外，提交按钮距离表单末尾“向下”的空间量不正确。
这是 html:
<!DOCTYPE html>
<html>
<head>
<title>Subscription Management System</title>
<link rel="stylesheet" type="text/css" href="../styles/style1.css" />
</head>
<body>
<div id="logo">
<div class="left_part">
<a href="index.php"><img src="../images/demo.gif"></a>
</div>
<div class="right_part">
<div class="bigHead">Comic Subscription Management</div>
<div class="littleNavi">
<a href="../index.php?logout=1">LOG-OUT</a>
</div>
</div>
<nav>
<ul>
<li><a href="#">ADD</a>
<ul>
<li><a href="addstore.php">STORE</a></li>
<li><a href="addpublisher.php">PUBLISHER</a></li>
<li><a href="addtitle.php">TITLE</a></li>
<li><a href="addsub.php">SUBSCRIBER</a></li>
<li><a href="updatesubmaster.php">SUB DETAILS</a></li>
<li><a href="addfaq.php">FAQ</a></li>
<li><a href="addemail.php">E-MAIL</a></li>
</ul>
</li>
<li><a href="#">UPDATE</a>
<ul>
<li><a href="updatestore.php">STORE</a></li>
<li><a href="updatetitle.php">TITLE</a></li>
<li><a href="updatesub.php">SUBSCRIBER</a></li>
<li><a href="addshortages.php">SHORTAGES</a></li>
<li><a href="updatefaq.php">FAQ</a></li>
<li><a href="updateemail.php">E-MAIL</a></li>
</ul>
</li>
<li><a href="#">DELETE</a>
<ul>
<li><a href="deletesub.php">SUBSCRIBER</a></li>
<li><a href="deletefaq.php">FAQ</a></li>
<li><a href="deleteemail.php">E-MAIL</a></li>
</ul>
</li>
<li><a href="#">PREPARE</a>
<ul>
<li><a href="pulllist.php">PULL LIST</a></li>
<li><a href="previews.php">DOWNLOAD PREVIEWS</a></li>
<li><a href="selectnew.php">NEW TITLES</a></li>
<li><a href="editnew.php">NEW TITLE VARIATIONS</a></li>
<li><a href="editnewprice.php">NEW TITLE PRICES</a></li>
<li><a href="editnewdetails.php">NEW TITLE DETAILS</a></li>
</ul>
</li>
</li>
<li><a href="#">E-MAIL</a>
<ul>
<li><a href="email.php">SUBSCRIBER</a></li>
<li><a href="maillist.php">MAILING LIST</a></li>
</ul>
</li>
</li>
</ul>
</nav></div>
<div id="contents">
<h2>Add New Titles</h2>
<form action="" method="post">
<ul>
<li>
<b>Publisher Of Titles To Add:</b><br>
<select name="publishers">
<option value ="DC">DC</option>
<option value ="DC/Vertigo">DC/Vertigo</option>
<option value ="IDW">IDW</option>
<option value ="Image Comics">Image Comics</option>
<option value ="Linsner.com">Linsner.com</option>
<option value ="Marvel">Marvel</option>
<option value ="Zenescope">Zenescope</option>
</select><br>
</li>
<li>
<b>Publication Status:</b><br>
<select name="status">
<option value ="active">active</option>
<option value ="announced">announced</option>
</select><br>
</li>
<li>
<b>Discount Eligible:</b><br>
<select name="discount">
<option value ="1">yes</option>
<option value ="0">no</option>
</select><br>
</li>
<br><div class="col1">
<li>Title 1:<br><input type="text" name="titles[]"></li>
<li>Title 2:<br><input type="text" name="titles[]"></li>
<li>Title 3:<br><input type="text" name="titles[]"></li>
<li>Title 4:<br><input type="text" name="titles[]"></li>
<li>Title 5:<br><input type="text" name="titles[]"></li>
</div>
<div class="col2">
<li>Title 6:<br><input type="text" name="titles[]"></li>
<li>Title 7:<br><input type="text" name="titles[]"></li>
<li>Title 8:<br><input type="text" name="titles[]"></li>
<li>Title 9:<br><input type="text" name="titles[]"></li>
<li>Title 10:<br><input type="text" name="titles[]"></li>
</div>
</ul>
<br><input type="submit" value="Add New Title(s)" name ="submit" id="submit">
</form>
</div>
<div id="footer">
<p>Administrator Control Panel </p>
</div>
</body>
</html>
这是有问题的 css。因为内容设置为900，所以col1和col2之间应该有缓冲:
/* Two Column Layout for Updates */
.col1 {
position: relative;
float: left;
width: 250px;
}
.col2 {
float: right;
position: relative;
width: 550px;
}
input[type="submit"] {
background-color: black;
border: 2px solid rgb(255, 255, 255);
border-radius: 7px;
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 13pt;
font-weight: bold;
margin: 10px 0;
outline: none;
padding: 5px 15px;
}
#contents {
background:#fff;
width:900px;
padding:20px;
padding-top:5px;
}
#contents {
margin:46px auto 0;
border: 5px solid black;
border-bottom: 0;
border-radius: 15px 15px 0 0;
box-shadow: 10px 15px 5px #888888;
min-height: 550px;
background-color:#F0F7FF;
position:relative;
}
这是显示屏显示的图像:
最佳答案
将 .col1 和 .col2 移到最后一个 </ul> 之外
这是无效的 HTML，可能会导致问题
关于html - CSS 样式在 HTML 页面中产生不良结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16226046/