Html 使用跨度边距对齐文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9620995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using span margins to align text
提问by Michael Cole
A little new to html so if further explanation is necessary or this question just doesn't make sense please feel free to say so.
对 html 有点新，所以如果需要进一步解释或者这个问题没有意义，请随时说出来。
I am using div to layout a webform I am designing and using the   to move text within a div doesnt always produce the result I want as far as the layout of the page.
我正在使用 div 来布局我正在设计的网络表单，并使用 在 div 内移动文本并不总是产生我想要的页面布局结果。
I started experimenting and by using:
我开始尝试并使用：
<span style="margin-left:(variable)px"></span>
i am able to move the text exactly where I want it.
我能够将文本准确移动到我想要的位置。
My question is this, is this a bad practice? is there a better way to do what I am trying to do, or a more conventional way? Or even something built into html that I just have not discovered yet.
我的问题是，这是一种不好的做法吗？有没有更好的方法来做我想做的事情，或更传统的方法？或者甚至是我还没有发现的内置于 html 中的东西。
Thank you
谢谢
*Added Block of code to show what i am trying to accomplish
*添加了代码块以显示我要完成的任务
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>
采纳答案by Smamatti
Using non breakable spaces for layout/positioning is bad practice.
What you are trying to do with styleattributes is better, but inline-style attributes are often considered as bad pratice, too.
Style attributes are hard to maintain and you duplicate lots of information etc. In addition this styling has the highest specificity and cannot be overwritten by other styles (like user CSS files). They should be used with caution.
使用不可破坏的空间进行布局/定位是不好的做法。您尝试使用style属性做的事情会更好，但内联样式的属性通常也被认为是不好的做法。
样式属性很难维护，并且您会复制大量信息等。此外，这种样式具有最高的特异性，不能被其他样式（如用户 CSS 文件）覆盖。应谨慎使用它们。
Use CSS attributes margin, paddingand text-alignfor this.
使用CSS属性margin，padding而text-align这一点。
Sample
http://jsfiddle.net/UYUA7/
HTML
HTML
Text<br />
Text <!-- Do NOT use this -->
<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>
CSS
CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.indent {
margin-left: 20px;
}
回答by evasilchenko
What you're doing is actually a better way to do spacing, than relying on  s. This will give you a much greater flexibility in the long-term and allow you to make changes quicker. (Less typing)
您正在做的实际上是一种更好的间距方式，而不是依靠 s。从长远来看，这将为您提供更大的灵活性，并允许您更快地进行更改。（少打字）
The only other thing that I would recommend is to read through this CSS manual:
我唯一推荐的另一件事是通读本 CSS 手册：
http://www.w3schools.com/css/css_intro.asp
http://www.w3schools.com/css/css_intro.asp
This will help you continue to learn about position with css.
这将帮助您继续了解使用 css 的位置。
UPDATE:
更新：
This is what your code can look like:
这是您的代码的样子：
CSS- Use it in the header
CSS- 在标题中使用它
<style type="text/css">
#complainantAddress {
margin-right: 3px;
}
#city {
margin-right: 16px;
}
</style>
HTML
HTML
Complainant's Address: <input type="text" size="50" id="complainantAddress"/>
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>
Notice that I created two css styles, one for each matching input boxes. Within each style I defined a margin which would add the appropriate spacing to the right of the input box.
请注意，我创建了两个 css 样式，每个匹配的输入框一个。在每种样式中，我都定义了一个边距，它将在输入框的右侧添加适当的间距。
So the first input box called "complainantAddress" will have 3px spacing to the right and the second one who's id is "city" will have 16px spacing to the right of it.
因此，第一个名为“complainantAddress”的输入框的右侧将有 3px 的间距，而第二个 id 为“city”的输入框的右侧将有 16px 的间距。
