个人中心
gpt4 book ai didi

HTML/CSS - 文本格式正确无间隙

转载 作者：行者123 更新时间：2023-11-28 10:43:19 25 4
gpt4 key购买 nike

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

最佳答案

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

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

关于HTML/CSS - 文本格式正确无间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31062000/

25 4 0
文章推荐： html - 如何在同一 div 标签下设置彼此独立的一组元素的样式？
文章推荐： css - 将背景图像高度设置为 100%
文章推荐： html - 由于显示 :table 而导致的布局间隙
文章推荐： javascript - 将外部js文件包含在(webpack和vue2)中的最佳方法是什么
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com