html - 换行符(在代码中)导致 HTML 输出中不需要的边距

Question

我有一个菜单，由 DIV-s 分隔。当这看起来像那样时:

<div id="container">
  <div>1</div><div>2</div><div>3</div>
</div>

它渲染得很好，但那不是很好。但如果我这样做:

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

输出中出现不需要的空格。 DIV之间存在差距。如何解决这个问题？

编辑:对不起大家。这是一个详细的 fiddle :

http://jsfiddle.net/qK5Bq/

.places_histNavigator {
    color: #AC3B75;
    font-family: georgiab;
    font-size: 1.3em;
    line-height: 38px;
}

.places_histNavigatorElement {
    border-left: 1px solid #F3F2EB;
    border-right: 1px solid #C2BEA8;
    display: inline-block;
    text-align: center;
}

<div class="places_histNavigator">
<div style="width: 20%;" class="places_histNavigatorElement">1<span class="customSelect legordulo" style="display: inline-block;"><span class="customSelectInner" style="width: 34px; display: inline-block;">25</span></span></div>
<div style="width: 19%;" class="places_histNavigatorElement">2</div>
<div style="width: 20%;" class="places_histNavigatorElement">3</div>
<div style="width: 15%;" class="places_histNavigatorElement">4</div>
<div style="width: 23%;" class="places_histNavigatorElement">5</div>
</div>

<div class="places_histNavigator">
<div style="width: 20%;" class="places_histNavigatorElement">1<span class="customSelect legordulo" style="display: inline-block;"><span class="customSelectInner" style="width: 34px; display: inline-block;">25</span></span></div>
  <hr>
<div style="width: 19%;" class="places_histNavigatorElement">2</div><div style="width: 20%;" class="places_histNavigatorElement">3</div><div style="width: 15%;" class="places_histNavigatorElement">4</div><div style="width: 23%;" class="places_histNavigatorElement">5</div></div>

Answer 1

根据评论中的假设，这里有一个可能的解决方案: DEMO

Inline属性考虑 div 之间存在的空间s，为了避免它，要么使用 block显示或添加 <!---> (html 注释标记)在 div 之间。

CSS

 *{
    margin:0px;
    padding:0px;
}
#container1,#container2 {
    display:block /* this is the key, make sure it's not marked inline */
}

HTML

<div id="container1">
    <div>1</div><div>2</div><div>3</div>
</div>
<br />
<div id="container2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

编辑

我真的不明白你想要达到的目标，但如果你想让东西在一行中显示，检查这个 Updated Demo , 考虑添加 white-space:nowrap;如果您想在一行中删除多余的空格，请添加到您的代码中。

CSS(更改了 2 行)

.places_histNavigator {
    color: #AC3B75;
    font-family: georgiab;
    font-size: 1.3em;
    line-height: 38px;
    white-space:nowrap; /* added this */
    display:block ; /* optional for uniformity*/
}

第二次编辑

请参阅，如评论中所述，inline属性甚至考虑 div 之间的空间......即......如果你有这样的标记 <div> </div>中间没有任何东西，它的inline ，然后它们之间的空间将被浏览器解析并呈现在网页上，为了避免这种情况，(就像我之前说的那样)放置 <!-->或更改 display类型。 Final Demo