CSS 正文宽度不适用于每个网页

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 */
}

Answer 2

你必须使用 position： relative or position： absolute 命令。