HTML/CSS - 文本向右無間隙格式化

HTMLHTML/CSS - 文本向右無間隙格式化

<!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; 
}

如果你去這個網站上的文字是正確的，但左側現在有一個巨大的gab。我如何解決這個CSS內？如果不可能，我將如何通過HTML修復它？我正在嘗試提交一個網站銷售材料（電子遊戲）。我將在稍後添加關於遊戲名稱的鏈接來描述它們，這比所要求的更多。儘管這是我最大的問題。我曾問過，但沒有任何東西能夠阻止右邊的差距。

來源

2015-06-25 Javaturtle

你的意思是在'description'怪異的換行符？從html中刪除'
'。 – Sphinxxx

「中心」標籤已被正式棄用。使用css代替 –

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

這是因爲<br>標籤已經在<p id="description">標籤內手動實現無處不在的。刪除所有的br標籤，它做你想做的。

來源

2015-06-25 22:50:26

並非如此，我希望文本保持在正確的位置，而其他所有內容都按順序排列。 – Javaturtle

但是你說你想要文字來填補左邊的空白。 –

對不起，我要讓右側的文字保持在右側，左側的文字框向上移動以縮小差距。 – Javaturtle

我會改變一些東西。 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" />

來源

2015-06-26 00:39:34

HTML/CSS - 文本向右無間隙格式化

回答

相關問題