html - 使用跨度边距对齐文本

Question

对 html 有点陌生，所以如果需要进一步解释或者这个问题没有意义，请随时说出来。

我正在使用 div 来布局我正在设计的网络表单，并使用   在 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;
}