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

【问题标题】：HTML/CSS - Text to right formatted without gapsHTML/CSS - 文本向右格式化，没有间隙
【发布时间】：2015-09-12 17:56:48
【问题描述】：

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 - $20 <br/>
        <img src="GoW.jpg" alt="God of War" /><input type="checkbox" name="games[]" value="godofwar" />
        God of War - $15 <br/>
        <img src="HL.jpg" alt="Half-life" /><input type="checkbox" name="games[]" value="halflife" />
        Half-Life - $10 <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 修复它？我正在尝试提交一个网站来销售材料（视频游戏）。稍后我将在游戏名称上添加链接来描述它们，这比所要求的要多。这是我最大的问题。我已经问过了，但没有什么能阻止右边的差距。

【问题讨论】：

您是指description 中奇怪的换行符吗？从 html 中删除 <br/>s。
center 标签已被完全弃用。改用 css

标签： html css text spacing

【解决方案1】：

我会改变一些事情。 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 - $20</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 - $15</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 - $10</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" />

【讨论】：

【解决方案2】：

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

这是因为 <br> 标记在 <p id="description"> 标记内的任何地方都已手动实现。删除所有 br 标记，它会做你想做的事。

【讨论】：

不是这样，我希望文本保持在右侧，而左侧的其他所有内容都井井有条。
但是你说你想让文字填补左边太右边的空白。
抱歉，我要让右边的文字留在右边，左边的方框向上移动以缩小差距。