HTML/CSS - 文本向右格式化，没有间隙

Question

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sell</title>
<link rel="stylesheet" type="text/css" href="../Web6/Web6.css"/>
</head>

<body>
    <center><h1>Video Games for Sale</h1></center>
    <center><h4>(This is for a school project only. Any of these items can not actually be purchased by an individual.)</h4></center>
<div><label class="field-label">First name:</label><input type="text" name="firstname" /></div><br/>
    <div><label class="field-label">Last Name:</label><input type="text" name="lastname" /></div>

    <p>
        <img src="SotC.jpg" alt="Shadow of the Colossus" /><input type="checkbox" name="games[]" value="shadowofthecolossus"/>
        Shadow of the Colossus -  <br/>
        <img src="GoW.jpg" alt="God of War" /><input type="checkbox" name="games[]" value="godofwar" />
        God of War -  <br/>
        <img src="HL.jpg" alt="Half-life" /><input type="checkbox" name="games[]" value="halflife" />
        Half-Life -  <br/>
    </p>

    <p id="description">This website is for the sale of 3 particularly good video games. The first one Shadow of the Colossus where you play a character Wander who is set<br/> on a quest to slay 16 Gigantic Colossus to bring back his love. Another game for sale is God of War, where you play as Spartan warrior Kratoes<br/> who is betrayed by the God of War Ares which sets up an Epic revenge tale. Finally Half-Life in which you play as scientist Gordon Freeman who<br/> was involved in a science experiment gone wrong and has to survive not only alien creatures let in, but also the military trying to quarentine the area. 
    </p>        

    <label class="field-label">Street:</label><input type="text" name="street" /><br/>
    <label class="field-label">City:</label><input type="text" name="city" /><br/>
    <label class="field-label" id="state">State:</label><select name="state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select><br/>
    <label class="field-label">Zip Code:</label><input type="text" name="zip" /><br/>

Credit Card Type:<br/>
<input type="radio" name="card" value="mastercard" checked="checked"/>Master Card<br/>
<input type="radio" name="card" value="visacard" />Visa Card<br/>
<input type="radio" name="card" value="expresscard" />American Express<br/>

<input type="submit" />
<input type="reset" />
</form>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

.field-label {
    display: inline-block;
    width: 5%;
    text-align: left;
}

img {width:1%;
    height:1%;
}

#description {text-align:right;
z-index:1;
}

如果你访问这个网站，文字在右边，但左边现在有一个巨大的空话。我如何在 CSS 内解决这个问题？如果不可能，我将如何通过 HTML 修复它？我正在尝试提交一个网站来销售材料（视频游戏）。稍后我会在游戏名称上添加链接来描述它们，这比要求的要多。这是我最大的问题。我已经问过了，但是没有什么可以阻止右边的差距。

Answer 1

示例：http://jsfiddle.net/ethbz5gn/1/

这是因为 <br> 标签在 <p id="description"> 标签内到处都是手动实现的。删除所有 br 标签，它会做你想要的。

Answer 2

我会改变一些事情。 center 标签已过时，删除它并使用 CSS。 br 标签没有语义意义，几乎不可能设置样式，所以如果需要分隔元素，请去掉它并替换为 div。让文本自然流动也更好。

了解 label 的工作原理。它使用元素的 id 或包装它。这做了一些事情，它有助于提高可访问性，还提供了一个额外的动作点。例如，单击标签会将焦点带到元素或单击单选框或复选框。

另请了解 floats，这是我用来将您的文本向右移动的方法。

代码如下：

h1, h4 {text-align:center;} /*Replace the center tag with css*/

.field-label {
    display: inline-block;
    width: 15%;
    text-align: left;
}

/*Get rid of list bullets and paddin when in field set*/
fieldset ul {list-style:none; padding:0;}

img {width:1%;
    height:1%;
}
form{float:left; width:50%;}

#description {text-align:right;
z-index:1;
    float:right;
    width:50%;
}

<h1>Video Games for Sale</h1>
<h4>(This is for a school project only. Any of these items can not actually be purchased by an individual.)</h4>
<p id="description">This website is for the sale of 3 particularly good video games. The first one Shadow of the Colossus where you play a character Wander who is set on a quest to slay 16 Gigantic Colossus to bring back his love. Another game for sale is God of War, where you play as Spartan warrior Kratoes who is betrayed by the God of War Ares which sets up an Epic revenge tale. Finally Half-Life in which you play as scientist Gordon Freeman who was involved in a science experiment gone wrong and has to survive not only alien creatures let in, but also the military trying to quarentine the area. 
</p>
<form action="#">
    <fieldset>
        <legend>Personal Details</legend>
        <div class="frmRow"><label class="field-label" for="firstname">First name:</label><input type="text" id="firstname" name="firstname" /></div>
        <div class="frmRow"><label class="field-label" for="lastname">Last Name:</label><input type="text" id="lastname" name="lastname" /></div>
    </fieldset>
    <fieldset id="selGames">
        <legend>Games</legend>
        <!--  Looks Like a list, so lets make it a list -->
        <ul>
            <li>
                <label for="SotC">
                    <img src="SotC.jpg" alt="Shadow of the Colossus" />
                </label>
                <input type="checkbox" id="SotC" name="games[]" value="shadowofthecolossus"/>
                <label for="SotC">Shadow of the Colossus - </label>
            </li>
            <li>
                <label for="GoW">
                    <img src="GoW.jpg" alt="God of War" />
                </label>
                <input type="checkbox" name="games[]" id="GoW" value="godofwar" />
                <label for="GoW">God of War - </label>
            </li>
            <li>
                <label for="HL">
                    <img src="HL.jpg" alt="Half-life" />
                </label>
                <input type="checkbox" id="HL" name="games[]" value="halflife" />
                <label for="HL">Half-Life - </label>
            </li>    
        </ul>
     </fieldset>
    <fieldset id="addressDetails">
        <legend>Address</legend>        
        <div class="frmRow"><label class="field-label" for="street">Street:</label><input type="text" name="street" id="street" /></div>
        <div class="frmRow"><label class="field-label" for="city">City:</label><input type="text" name="city" id="city" /></div>
        <div class="frmRow"><label class="field-label" for="state">State:</label><select id="state" name="state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
            </select></div>
        <div class="frmRow"><label class="field-label" for="zip">Zip Code:</label><input type="text" id="zip" name="zip" /></div>
    </fieldset>
        <fieldset>
            <legend>Credit Card Type</legend>
            <!--Again this looks like a list-->
            <ul>
                <li><input type="radio" name="card" id="mc" value="mastercard" checked="checked"/><label for="mc">Master Card</label></li>
                <li><input type="radio" name="card" id="vc" value="visacard" /><label for="vc">Visa Card</label></li>
                <li><input type="radio" name="card" id="amex" value="expresscard" /><label for="amex">American Express</label></li>
            </ul>   
            </fieldset>

<input type="submit" />
<input type="reset" />

HTML/CSS - 文本向右格式化，没有间隙

HTML/CSS - Text to right formatted without gaps

html

css

text

spacing