文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML/CSS -文本格式从右到右，没有间隙

问HTML/CSS -文本格式从右到右，没有间隙
EN

Stack Overflow用户

提问于 2015-06-25 22:38:43

回答 2查看 74关注 0票数 2

<!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修复它？我试图提交一个网站出售材料(电子游戏)。稍后我将在游戏名称上添加链接来描述它们，这比要求的更多。不过，这是我最大的问题。我已经问过了，但是没有什么能阻止右边的差距。

html

css

text

spacing

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-06-25 22:50:26

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

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

票数 3

Stack Overflow用户

发布于 2015-06-26 00:39:34

我只会改变一些事情。center标记已经过时，摆脱它并使用CSS。br标记没有语义意义，而且几乎不可能进行样式设计，因此，如果需要使用div来分隔元素，那么就去掉它，用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" />

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31062000

复制

相似问题

问HTML/CSS -文本格式从右到右，没有间隙
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS -文本格式从右到右，没有间隙EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS -文本格式从右到右，没有间隙
EN