在两个对象之间具有水平空间的 HTML 是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16515421/
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
What's the HTML to have a horizontal space between two objects?
提问by user2376452
I have been searching for an answer and trying different things without success. Could someone kindly let me know how to put spaces between two objects by using PHP code? (Please note: I use WordPress, in case that makes a difference.)
我一直在寻找答案并尝试不同的事情但没有成功。有人可以让我知道如何使用 PHP 代码在两个对象之间放置空格吗？（请注意：我使用 WordPress，以防万一。）
I know how to do so vertically with </br>, but what is the horizontal equivalent to that?
我知道如何使用 垂直这样做</br>，但水平相当于什么？
Please note that I don't know a whole lot about code, so any detailed information you are able to provide is very much appreciated in advance - thank-you very much!
请注意，我对代码知之甚少，因此非常感谢您提供的任何详细信息 - 非常感谢！
回答by Chief Wiggum
I guess what you want is:
我想你想要的是：
But this is usually not a nice way to align some content. You better put your different content in
但这通常不是对齐某些内容的好方法。你最好把你不同的内容放在
<div>
tags and then use css for proper alignment.
标签，然后使用 css 进行正确对齐。
You can also check out this post with useful extra info:
您还可以查看此帖子并提供有用的额外信息：
回答by kireirina
You should put a padding in each object. For example, you want a space between images, you can use the following:
您应该在每个对象中放置一个填充。例如，您希望图像之间有一个空格，您可以使用以下内容：
img{
padding: 5px;
}
That means 5px paddin for ALLsides. Read more at http://www.w3schools.com/css/css_padding.asp. By the way, studying a lot before attempting to program will make things easier for you (and for us).
这意味着所有边的5px paddin 。在http://www.w3schools.com/css/css_padding.asp阅读更多内容。顺便说一句，在尝试编程之前进行大量学习将使您（以及我们）的工作更轻松。
回答by Arup Hore
CSS
CSS
div.horizontalgap {
float: left;
overflow: hidden;
height: 1px;
width: 0px;
}
Usage in HTML (for a 10px horizontal gap)
在 HTML 中的使用（对于 10px 的水平间隙）
<div class="horizontalgap" style="width:10px"></div>
回答by Eddie Jaoude
PHP does not do styling. You need to use html or css. Take a look at http://www.w3schools.com/tags/tag_hr.asp
PHP 不做样式。您需要使用 html 或 css。看看http://www.w3schools.com/tags/tag_hr.asp
In HTML 4.01, the
在 HTML 4.01 中，
标签代表一条水平线。
In HTML 4.01, the <hr> tag represents a horizontal rule.
回答by dtmp
Well, this is probably frowned upon but you can make a 1px transparent image, then size it as needed in between text.
好吧，这可能令人不悦，但您可以制作一个 1px 的透明图像，然后根据需要在文本之间调整其大小。
Some text <img src="spacer.png" height="1px" width="10px"> Some more text
I've run into this issue when one or two spaces just wasn't enough for my design sensibilities.
当一两个空间不足以满足我的设计敏感性时，我遇到了这个问题。
回答by Mikhail M
<div>looks nice, but a bit complicated in setting all these display: block, float: left... Maybe because the general idea behind <div>is a block of a paragraph size or more.
<div>看起来不错，但设置所有这些有点复杂display: block, float: left......也许是因为背后的一般想法<div>是一个段落大小或更大的块。
I have found the following nice way for spacing:
我发现了以下间距的好方法：
<button>Button 1></button>
<button style="margin-left: 4em">Button 2</button>
回答by casraf
I think what you mean is putting 2 paragraphs (for example) in 2 columns instead of one below the other? In that case, I think floatis your solution.
我认为您的意思是将 2 个段落（例如）放在 2 列中，而不是将一个段落放在另一列之下？在这种情况下，我认为float是您的解决方案。
<div style="float: left"> <!-- would cause this to hang on the left -->
<div style="float: right"> <!-- would cause this to hang on the right-->
Here's an example: http://jsfiddle.net/XPfLA/1
这是一个例子：http: //jsfiddle.net/XPfLA/1
回答by B. Clay Shannon
Another way you can add horizontal space between elements is to set up labels to preserve spaces in css:
在元素之间添加水平空间的另一种方法是设置标签以保留 css 中的空间：
label {
white-space: pre;
}
..and then add a label with as many spaces as you want:
..然后添加一个包含任意多空格的标签：
<label> </label>
回答by roel
You could use the old ways. And use a table. In the table you define 3 columns. You set the the width of your whole table and define the width of every colum. that way you can horizantaly space 2 objects. You put object one inside cell1 (colum1, row1) and object2 in cell3 (colum 3, row 1) and you leave cell 2 empty. Given it has a width, you will see empty spaces. example
你可以使用旧的方法。并使用一张桌子。在表中定义 3 列。您可以设置整个表格的宽度并定义每个列的宽度。这样你就可以水平放置2个物体。您将对象一放在单元格 1（列 1，行 1）中，将对象 2 放在单元格 3（列 3，行 1）中，并将单元格 2 留空。鉴于它有一个宽度，你会看到空白的空间。例子
<table width="500">
<tr>
<td width="40%">
Object 1
</td>
<td width="20%">
</td>
<td width="40%">
Object 2
</td>
</tr>
</table>
Or you could go the better way with div's. Just put your objects inside divs. Add a middle div and put these 3 divs inside another div. At the css style to the upper div: overflow: auto and define a width. Add css style to the 3 divs to define their width and add float: left example
或者你可以更好地使用 div。只需将您的对象放在 div 中。添加一个中间 div 并将这 3 个 div 放在另一个 div 中。在css样式到上边div:overflow:auto并定义一个宽度。将 css 样式添加到 3 个 div 以定义它们的宽度并添加浮动：左示例
<div style="overflow: auto;width: 100%;">
<div style="width:200px;float: left;">
Object 1
</div>
<div style="width:200px;float: left;">
</div>
<div style="width:200px;float: left;">
Object 2
</div>
</div>
