1

我的 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;
}

这是显示器显示的图像:

在此处输入图像描述

4

1 回答 1

1

将 .col1 和 .col2 移到最后一个之外</ul>

那是无效的 HTML,可能是导致问题的原因

于 2013-04-25T22:55:39.497 回答