Question

有点新的HTML，所以如果需要进一步解释或者这个问题没有意义，请随意说出来。

我正在使用div来布局我正在设计的webform并使用＆amp; nbsp来移动div中的文本并不总是产生我想要的结果到页面的布局。

我开始尝试并使用：

<span style="margin-left:(variable)px"></span>

我能够将文本准确地移动到我想要的位置。

我的问题是，这是一种不好的做法吗？有没有更好的方法来做我想做的事情，或更传统的方式？或者甚至是html内置的东西，我还没有发现。

谢谢

* 添加了代码块以显示我想要完成的内容

   Complainant's Address
   <input type="text" size="50" id="complainantAddress"/> 
   <span style="margin-left:3px"></span>
   City
   <input type="text" name="city" maxlength="15" size="15"/>
   <span style="margin-left:16px"></span>
   State
   </div>

Answer 1

使用不易碎的空间进行布局/定位是不好的做法。您尝试使用style属性做得更好，但内联式属性通常也被视为不良实践。
样式属性很难维护，并且您复制了大量信息等。此外，这种样式具有最高的特异性，不能被其他样式（如用户CSS文件）覆盖。应谨慎使用它们。

为此使用CSS属性margin，padding和text-align。

<强>示例
http://jsfiddle.net/UYUA7/

HTML

Text<br />

&nbsp;&nbsp;&nbsp;&nbsp;Text <!-- Do NOT use this -->

<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>

CSS

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.indent {
    margin-left: 20px;
}

Answer 2

你所做的实际上是一种更好的间距，而不是依赖于＆amp; nbsps。这将为您提供更长期的灵活性，并允许您更快地进行更改。（少输入）

我建议的另一件事是阅读这本CSS手册：

http://www.w3schools.com/css/css_intro.asp

这将有助于您继续了解css的位置。

更新：

这就是您的代码的样子：

CSS - 在标题

中使用它

<style type="text/css">
#complainantAddress {
    margin-right: 3px;
}

#city {
    margin-right: 16px;
}
</style>

<强> HTML

Complainant's Address: <input type="text" size="50" id="complainantAddress"/> 
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>

请注意，我创建了两个css样式，每个样式对应一个匹配的输入框。在每个样式中，我定义了一个边距，它将在输入框的右侧添加适当的间距。

因此，名为“complainantAddress”的第一个输入框的右边距离为3px，而id为“city”的第二个输入框的右边距离为16px。

使用跨度边距来对齐文本

2 个答案: