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之间存在差距。如何解决这个问题？

编辑：对不起大家。这是一个详细的小提琴：

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之间存在的空格，以避免它，使用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

Answer 2

将margin:0px;和padding:0px;添加到您的正文HTML

Answer 3

如果您的div元素设置为显示inline，则它们会像文字一样被有效处理，因此HTML格式很重要 - 在这种情况下，新行会创建空格。如果您希望格式化HTML但控制此效果，则可以将元素设置为inline-block，然后手动控制其边距以反作用此效果，或者可能在父级上设置word-spacing。

换行符（在代码中）会导致HTML输出中出现不必要的边距

3 个答案: