html - CSS Body 宽度不适用于每个网页

Question

我对 CSS 比较陌生，我正在创建一个 Web 应用程序，其中包含许多我希望集中在所有网页上的网页。我创建了一个 CSS 样式表，我将宽度设置为 60% 并将文本对齐设置为居中。在索引页上，文档居中，但当我点击链接时，下一页始终是屏幕的整个宽度。

我在下面附上了一些代码；

感谢您的帮助...

CSS 样式表

/*
Document   : affablebean
Created on : Jun 9, 2010, 3:59:32 PM
Author     : tgiunipero
Description: Style rules for the AffableBean application
*/


/* html tags */
body {
    font-family: Arial, Helvetica, sans-serif;
    width: 60%;
    text-align: center;
    margin: 20px auto;
}

hr {
    border: 0;
    background-color: #333;
    height: 1px;
    margin: 0 25px;
    width: 300px;
}

table {
    margin: 0 20px;
    border-spacing: 0;
    text-align: center;
    border: solid 1px #f5eabe;
}


/* general styles */
#main { background: #eee }

#singleColumn {
    margin: 20px 30px;
    text-align: left;
}

.lightBlue { background-color: #edf8f7 }

.white { background-color: #fff }

.bubble {
    font-weight: bold;
    background-color: #f5eabe;
    padding: 5px;
    color: inherit;
}

.hMargin { margin: 0 30px }

.smallText { font-size: small }

.header {
    background-color: #c3e3e0;
    height: 30px;
}


/* styles for elements contained in the header, i.e.,
   shopping cart widget, language toggle, and logo */
#header {
    height: 250px;
    background: #aaa;
}

#logo {
    height: 155px;
    width: 155px;
    float: left;
    margin-left: 30px;
    margin-top: -20px;
}

#logoText {
    float: left;
    margin: 20px 0 0 70px;
    /* font styles apply to text within img alt attribute */
    font-family: 'American Typewriter', Courier, monospace;
    font-size: 50px;
    color: #333;
}

#widgetBar {
    height: 50px;
    width: 850px;
    float: right;
    background: #ccc;
}

.headerWidget {
    width: 194px;
    margin: 20px 2px;
    font-size: small;
    float: right;
    line-height: 25px;
    background: #aaa;
}


/* footer styles */
#footer {
    height: 60px;
    width: 350px;
    clear: left;
    background: #aaa;
}


/* index page styles */
#indexLeftColumn {
    height: 400px;
    width: 350px;
    float: left;
    background: #ccc;
}

#indexRightColumn {
    height: 400px;
    width: 500px;
    float: left;
    background: #eee;
}

.categoryBox {
    height: 176px;
    width: 212px;
    margin: 21px 14px 6px;
    float: inherit;
    background: #ccc;
}

.categoryLabelText {
    line-height: 150%;
    font-size: x-large;
}


/* category page styles */
#categoryLeftColumn {
    width: 185px;
    float: left;
    margin-top: 25px;
    padding-left: 15px;
}

#categoryRightColumn {
    margin-top: 10px;
    width: 650px;
    float: left;
}

.categoryButton {
    margin: 15px 22px;
    padding: 13px;
    display: block;
    background-color: #d3ede8;
}

#selectedCategory {
    background-color: #b2d2d2;
    margin-left: 10px;
    width: 139px;
}

#categoryTitle {
    margin: -34px 180px 0 0;
    font-size: x-large;
    float: right;
    background-color: #f5eabe;
    padding: 7px;
}

.categoryText {
    line-height: 25px;
    font-size: x-large;
}

#productTable { width: 600px }

#productTable tr { height: 90px }

#productTable td { width: 145px }


/* cart page styles */
#actionBar {
    margin: 30px;
    width: 750px;
    text-align: center;
}

#subtotal { margin: 40px 0 20px 430px }

#cartTable { width: 750px }

#cartTable td {
    width: 145px;
    height: 90px;
}


/* checkout page styles */
#checkoutTable {
    width: 360px;
    background-color: #f5eabe;
    float: left;
    height: 280px;
}

#infoBox {
    width: 300px;
    padding-left: 30px;
    float: left;
}

#priceBox {
    padding: 10px;
    margin: 10px 0;
    height: 128px;
    background-color: #c3e3e0;
}


/* confirmation page styles */
#confirmationText {
    margin: 0 20px 20px;
    padding: 10px;
    background-color: #f5eabe;
    float: left;
    width:540px;
}

.summaryColumn {
    margin-top: 15px;
    width: 50%;
    float: left;
}

#orderSummaryTable {
    width: 100%;
    text-align: left;
    height: 200px;
}

#deliveryAddressTable {
    width: 70%;
    margin-left: 15%;
    text-align: left;
    height: 200px;
}

索引页

<ui:composition template="/layout/abMainTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:define name="head">
        <link rel="stylesheet" type="text/css" href="css/affablebean.css"></link>
        <title>The Affable Bean</title>
    </ui:define>                
    <ui:define name="content">
        <div id="main">
            <div id="header">

                <div id="widgetBar">

                    <div class="headerWidget">
                        [ language toggle ]
                    </div>

                    <div class="headerWidget">
                        [ shopping cart widget ]
                    </div>

                </div>  

                <a href="#">
                    <img src="#" id="logo" alt="Affable Bean logo"></img>
                </a>

                <img src="#" id="logoText" alt="the affable bean"></img>

            </div>

            <div id="indexLeftColumn">

                <div id="welcomText">
                    <p>[ welcome text ]</p>
                </div>
            </div>

            <div id="indexRightColumn">

                <div class="categoryBox">
                    <a href="category.xhtml">
                        <span class="categoryLabelText">dairy</span>
                    </a>
                </div>

                <div class="categoryBox">
                    <a href="cart.xhtml">
                        <span class="categoryLabelText">meats</span>
                    </a>
                </div>

                <div class="categoryBox">
                    <a href="checkout.xhtml">
                        <span class="categoryLabelText">bakery</span>
                    </a>
                </div>

                <div class="categoryBox">
                    <a href="confirmation.xhtml">
                        <span class="categoryLabelText">fruit and veg</span>
                    </a>
                </div>

            </div>

            <div id="footer">
                <hr>
                    <p id="footerText">[ footer text ]</p>
                </hr>
            </div>
        </div>
    </ui:define>
</ui:composition>

分类页面

<ui:composition template="/layout/abMainTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:define name="head">
        <link rel="stylesheet" type="text/css" href="css/affablebean.css"></link>
        <title>The Affable Bean</title>
    </ui:define>                
    <ui:define name="content">
          <div id="main">
            <div id="header">

                <div id="widgetBar">

                    <div class="headerWidget">
                        [ language toggle ]
                    </div>

                    <div class="headerWidget">
                        [ checkout button ]
                    </div>

                    <div class="headerWidget">
                        [ shopping cart widget ]
                    </div>

                </div>  

                <a href="#">
                    <img src="#" id="logo" alt="Affable Bean logo"></img>
                </a>

                <img src="#" id="logoText" alt="the affable bean"></img>

            </div>

            <div id="categoryLeftColumn">
                <div id="selectedCategory">
                    <a href="#" class="categoryButton">
                        <span class="categoryText">dairy</span>
                    </a>

                    <a href="#" class="categoryButton">
                        <span class="categoryText">meats</span>
                    </a>

                    <a href="#" class="categoryButton">
                        <span class="categoryText">bakery</span>
                    </a>

                    <a href="#" class="categoryButton">
                        <span class="categoryText">fruit and veg</span>
                    </a>
                </div>
            </div>

            <div id="categoryRightColumn">
                <p id="categoryTitle">[ selected category ]</p>

                <table id="productTable">
                    <tr>
                        <td class="lightBlue">
                            <img src="#" alt="product image"></img>
                        </td>
                        <td class="lightBlue">
                            [ product name ]
                            <br>
                                <span class="smallText">[ product description ]</span>
                            </br>
                        </td>
                        <td class="lightBlue">[ price ]</td>
                        <td class="lightBlue">
                            <form action="#" method="post">
                                <input type="submit" value="purchase button"></input>
                            </form>
                        </td>
                    </tr>

                    <tr>
                        <td class="white">
                            <img src="#" alt="product image"></img>
                        </td>
                        <td class="white">
                            [ product name ]
                            <br>
                                <span class="smallText">[ product description ]</span>
                            </br>
                        </td>
                        <td class="white">[ price ]</td>
                        <td class="white">
                            <form action="#" method="post">
                                <input type="submit" value="purchase button"></input>
                            </form>
                        </td>
                    </tr>

                    <tr>
                        <td class="lightBlue">
                            <img src="#" alt="product image"></img>
                        </td>
                        <td class="lightBlue">
                            [ product name ]
                            <br>
                                <span class="smallText">[ product description ]</span>
                            </br>
                        </td>
                        <td class="lightBlue">[ price ]</td>
                        <td class="lightBlue">
                            <form action="#" method="post">
                                <input type="submit" value="purchase button"></input>
                            </form>
                        </td>
                    </tr>

                    <tr>
                        <td class="white">
                            <img src="#" alt="product image"></img>
                        </td>
                        <td class="white">
                            [ product name ]
                            <br>
                                <span class="smallText">[ product description ]</span>
                            </br>
                        </td>
                        <td class="white">[ price ]</td>
                        <td class="white">
                            <form action="#" method="post">
                                <input type="submit" value="purchase button"></input>
                            </form>
                        </td>
                    </tr>
                </table>
            </div>

            <div id="footer">
                footer
            </div>

        </div>

    </ui:define>
</ui:composition>

和模板页面

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <ui:insert name="head"></ui:insert>
    </h:head>
    <h:body>
        <ui:insert name="content" ></ui:insert>
    </h:body>
</html>

Answer 1

body 元素位于 html 元素内，如果您想以百分比设置任何元素的宽度，您应该首先定义它的父元素的宽度。

html {
    padding:0;
    margin:0;
    width:100%; /* 100% of window with, so the body width of 60% will work as expected */
}