Question

嘿伙计我有一个问题，我在我的网站的右端有很多空的空间，我尝试编辑宽度，但这不会解决问题，我很卡住，将不胜感激任何帮助！谢谢！

div.logo {
    position: absolute;
    left: 625px;
}

div.menu {
    position: relative;
    left: 39%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

hr {
  border-top: 5px solid #111111; 
  border-bottom: 5px solid #292929; 
  position: relative;
  top: 60px;
}

li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}'
#details_product_box {
    position:relative;
    left:-300px;


}
#description_box {
    position:relative; 
    top:-350px;
    left:580px;
    width: 200px;
}

#products_box {
    width:900px;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
}

    #single_product {
        float:left;
        margin-left: 20px;
        padding: 10px;
    }

    #shopping_cart {
        width:800px;
        height:50px;
        position: relative;
        font-size: 20px;
    }

li.select {
    float: left;
}

.product_text {
    text-align: center;

}





<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
    <div class="logo">
        <img src="logo.png">
    </div>
<hr>
    <?php cart(); ?>
    <div id="shopping_cart">
        <span style="float:left;">Welcome Guest | Total Items: <?php total_items();?> <b style="colour:blue;">| Total: £<?php total_price(); ?></b> <a href="cart.php">Go to Cart: </a></span>
    </div>
    <div class="menu">
        <ul>
            <li class="select"><a href="main.php">HOME</a></li>
            <li class="select"><a href="basket.html">BASKET </a></li>
            <li class="select"><a href="summary.html">OUR WORLD </a></li>
        </ul>
    </div>
    <br>
    <br>
    <br>

    <?php
        $con = mysqli_connect("csmysql.cs.cf.ac.uk", "c1546910",
                         "sebastian1", "c1546910");
        $query = "SELECT * FROM MrPiece";
        $result = mysqli_query($con, $query);

        $ip=getIp(); 

        if(mysqli_num_rows($result) > 0) {
            while($row = mysqli_fetch_assoc($result)) {
                $pro_id = $row['ID'];
                $product_name = $row['Name'];
                $product_price = $row['Price'];
                $product_image = $row['Image'];

                echo "<div id='products_box'>";
                echo "<div id='single_product'>";

                echo "<img src='$product_image' style='height:250px; width:180px'> <br>";
                echo "<a href='details.php?pro_id=$pro_id'>$product_name</a><br>";
                echo "£ $product_price <br>";
                echo "<a href='main.php?add_cart=$pro_id'><button style='float: center;'>Add to cart</button></a>";

                echo "</div>";
                echo "</div>";
            }
        }
        else {echo "No results";}
        mysqli_close($conn);
    ?>
</body>

<html>

Answer 1

使用检查器，尝试删除部分HTML，直到空白区域消失。这就是我首先要确定页面上哪个元素导致问题。

之后再看一下可能导致元素或其子元素的问题。如果你找不到原因，也许你可以设置一个例子（https://jsfiddle.net/），以便我们可以看看它。

Answer 2

以left: 39%;样式取出div.menu。

如果您尝试将菜单置于中心位置，则可以使用

更好的方法

div.menu {
    position: relative;
    left: 39%;
}

查看此Fiddle

CSS问题，网站右端有很多空白空间

2 个答案: