Question

我试图在内容的左侧和右侧添加边框，并成功完成。但我不能让边框一直向导栏移动。我试着尽我所能让空的空间消失，但我的尝试都没有奏效。

<!DOCTYPE html> 
<html>
    <head>
    <title>Plugins | headgam3z.com</title>
    <link href="style.css" rel="stylesheet"/>
    <link rel="shortcut icon" type="image/x-icon" href="ico.ico" >
</head>
<body>
    <div class="all_content">
        <div id="body_sides">
            <img src="images/left_body.jpg" class="left_body"/>
            <img src="images/right_body.jpg" class="right_body"/>
        <div id="header">
            <a href="index.html">
                <img src="images/header_2.jpg"/>
            </a>
        </div>
        <div id="nav">
            <div id="nav_bar"></div>
            <a href="index.html">Home</a>
            <a href="plugins.html">Plugins</a>
            <a href="news.html">News</a>
            <a href="contact.html">Contact</a>
        </div>
        <!-- EasyColorChat -->
        <div id="plugin_space">
            <a href="http://dev.bukkit.org/bukkit-plugins/easycolorchat/" id="plugin_box">
                <h1>EasyColorChat</h1>
            </a>
            <p>
            <span id="short_desc">A lightweight plugin that allows players to have a default chat color by simply using a command!</span><br>
            With EasyColorChat (ECC), you can set a player's chat color to whatever you wish in-game or by console. You can also set your own chat color, as well.
            ECC is completely newbie friendly and extremely customizable through it's config.yml file - although you do not need to edit any files. Just download ECC then drop it into
            your plugins folder.
            </p>
        </div>
        <!--EasyItemRename -->
        <div id="plugin_space">
            <a href="http://dev.bukkit.org/bukkit-plugins/easyitemrename/" id="plugin_box">
                <h1>EasyItemRename</h1>
            </a>
            <p>
            <span id="short_desc">Easily give your players access to renaming and loring items with one permission!</span><br>
            Just use the renaming or loring command while holding an item, and then it gets renamed or lored.
            You can use spaces and colors, too. This is a wonderful donor perk for anyone's server. When the rename or lore command is used,
            it automatically logs the information into a log.txt file in EasyItemRename's folder.
            </p>
        </div>
        <!-- hgGuard -->
        <div id="plugin_space">
            <a href="http://dev.bukkit.org/bukkit-plugins/hgguard/" id="plugin_box">
                <h1>hgGuard</h1>
            </a>
            <p>
            <span id="short_desc">Extremely user friendly plugin for server owners who want to easily control guard settings on their server!</span><br>
             You can set if a guard should lose items upon death, all different types of messages, enchantments per item, reload the configuration in-game,
             save a player's inventory then replace it with a guard kit when going on duty - you can get saved inventory back once off duty,
             - turn on and off different items and enchant in the configuration file, set the amount of items a guard kit will have, and more.
            </p>
        </div>
        <!-- SugarRush -->
        <div id="plugin_space">
            <a href="http://dev.bukkit.org/bukkit-plugins/sugarrush/" id="plugin_box">
                <h1>SugarRush</h1>
            </a>
            <p>
            <span id="short_desc">Give a player a SugarRush when a player eats a cookie or pie!</span><br>
            You can configure the message, time, and amplifier of the speed effect in the config.yml file.
            </p>
        </div>
        <!-- FillBottle -->
        <div id="plugin_space">
            <a href="http://dev.bukkit.org/bukkit-plugins/fillbottle/" id="plugin_box">
                <h1>FillBottle</h1>
            </a>
            <p>
            <span id="short_desc">Quickly and easily fill up your empty bottles with water!</span><br>
            To fill up any empty bottle, just toggle FillBottle on then right click. You can change all of the messages and reload the plugin
            straight through the console.
            </p>
        </div>
        <!-- AntiDispense -->
        <div id="plugin_space">
            <a href="http://dev.bukkit.org/bukkit-plugins/antidispense/" id="plugin_box">
                <h1>AntiDispense</h1>
            </a>
            <p>
            <span id="short_desc">Simply and smartly block dispensers from dispensing items with this lightweight plugin!</span><br>
            Put AntiDispense in your plugins folder, reload/restart the server, and you're done. Dispensers will now no longer be able to dispense items.
            </p>
        </div>
        <!-- PlaceSmelt -->
        <div id="plugin_space">
            <a href="http://dev.bukkit.org/bukkit-plugins/placesmelt/" id="plugin_box">
                <h1>AntiDispense</h1>
            </a>
            <p>
            <span id="short_desc">Simply and smartly block dispensers from dispensing items with this lightweight plugin!</span><br>
            Put AntiDispense in your plugins folder, reload/restart the server, and you're done! Dispensers will now no longer be able to dispense items.
            </p>
        </div>
    </div>
</body>

body {
    margin: 0px;
    margin-left: 90px;
    margin-right: 90px;
    padding: 0px;
    padding-left: 100px;
    padding-right: 100px;
    background-color: white;
}

.all_content {
    margin: 0px;
    padding: 0px;
}

.all_content #nav {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

.all_content #body_sides .left_body {
    position: fixed;
    margin: 0px;
    padding: 0px;
    width: 50px;
    height: 667px;
    left: 140px;
}

.all_content #body_sides .right_body {
    position: fixed;
    margin: 0px;
    padding: 0px;
    width: 50px;
    height: 667px;
    right: 140px;
}

.all_content #header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 250px;
}

.all_content #nav #nav_bar {
    margin: 0px;
    padding: 0px;
    width: 980px;
    height: 25px;
    background-color: #000000;
}

.all_content #nav a {
    position: relative;
    bottom: 21px;
    text-decoration: none;
    margin-left: 150px;
    padding: 4px 10px;
    color: #00FFFF; /* FF6A00 */
}

.all_content #nav a:hover {
    color: #8EFFFF;
    background-color: #494949;
}

.all_content h1 {
    margin-left: 90px;
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
    color: #000000;
}

.all_content h6 {
    position: relative;
    bottom: 15px;
    margin-left: 90px;
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
    color: #000000;
}

.all_content  p {
    margin-left: 90px;
    padding-right: 90px;
    color: #808080;
}

#domain {
    color: #333333;
    font-weight: bold;
}

#short_desc {
    font-size: 18px;
    font-weight: bold;
    color: #4C4C4C;
}

#plugin_space {
    position: relative;
    margin: 0px;
    padding: 2px; 
    border-color: black;
    border-left-style: solid;
    border-right-style: solid;
}

#plugin_box {
    text-decoration: none;

}

#bold_darkred {
    color: #C10000;
    font-weight: bold;
}

#darkred {
    color: #C10000;
}

#easycolorchat_update {
    padding: 0px;
    margin: 0px;
    border-color: #00FFFF;
    border-left-style: solid;
    border-right-style: solid;
}

您可以在那里查看此图片上的空白区域 - ＆gt; http://imgur.com/lAml5wx

Answer 1

问题是你的导航比看起来更高

给它一个高度，例如下面应该做的伎俩

.all_content #nav {
    padding: 0px;
    margin: 0px;
    border: 0px;
    height: 25px;
}

Answer 2

将以下代码添加到您的css

#nav {
height: 25px;
}

将来将您的代码添加到JSFiddle并给我们一个链接。这将有助于会员更快地回答您的问题。

我怎样才能让这个空旷的空间消失？

2 个答案: