为什么这个HTML元素开始缩进，我怎样才能让它从左边的页边开始？

我有一个HTML元素，它坚持从上面的元素的右端下方开始缩进，我希望它从左页边开始。我怎样才能做到这一点？为什么这个HTML元素开始缩进，我怎样才能让它从左边的页边开始？

由于我不明白的原因，例如如果下面的代码中的“Hello”被重复14次的单词“Hello”替换，问题就会消失。

我已经将代码降低到了最低限度，并且存在问题。

html, 
 
body, 
 
div, 
 
span { 
 
    vertical-align: baseline; 
 
} 
 

 
#row1 { 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 

 
#row1-col1 { 
 
    max-width: 570px; 
 
} 
 

 
.row1-header { 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
} 
 

 
.button-left { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-bottom: 5px; 
 
}

<div id="row1"> 
 
    <div id="row1-col1"> 
 
    <span class="button-left"><a href="#1">Previous</a></span> 
 
    <span class="button-right"><a href="#2">Next</a></span> 
 
    <br> 
 
    <div class="row1-header"> 
 
     Hello 
 
    </div> 
 
    <!--close row1-header--> 
 
    </div> 
 
    <!--close row1-col1--> 
 
</div> 
 
<!--close row1-->

编辑

@从button-left去除float: left的杰夫的建议，解决了如上所述的问题，所以我给了他蜱，但unpared代码有一个正确的在左手边的同一行上按一下手动按钮，然后从左边的按钮中删除float-left使其不同步。所以问题已经演变成如何改变下面的代码来停止缩进这个词，“你好”，将结果保留原样。

html, 
 
body, 
 
div, 
 
span { 
 
    vertical-align: baseline; 
 
} 
 

 
#row1 { 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 

 
#row1-col1 { 
 
    max-width: 570px; 
 
} 
 

 
.row1-header { 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
} 
 

 
.button-left { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-bottom: 5px; 
 
} 
 

 
.button-right { 
 
display: inline-block; 
 
float: right; 
 
margin-bottom: 5px; 
 
}

<div id="row1"> 
 
    <div id="row1-col1"> 
 
    <span class="button-left"><a href="#1">Previous</a></span> 
 
    <span class="button-right"><a href="#2">Next</a></span> 
 
    <br> 
 
    <div class="row1-header"> 
 
     Hello 
 
    </div> 
 
    <!--close row1-header--> 
 
    </div> 
 
    <!--close row1-col1--> 
 
</div> 
 
<!--close row1-->

来源

2017-08-30 ruffle

使用浏览器的开发者工具。检查空间/区域。这可能是'body'上的边距或填充设置。 –

这里：

.button-left { 
    display: inline-block; 
    float: left; 
    margin-bottom: 5px; 
}

取出float: left;

来源

2017-08-30 22:10:04 Jeff

谢谢。这解决了我在这里发布的代码中的问题，但在实际的代码中，我有一个右手按钮，它与左手按钮位于同一行上，并从左侧按钮中移除该浮动按钮，同时解决“你好”问题，使两个按钮不同步。 – ruffle

不客气，如果我的答案适合你，请标记它。对于需要分享代码的新问题。 – Jeff

clear: left上.row1-header将解决这个问题。

来源

2017-08-30 22:09:50 Martirosian

谢谢，但即使在上面的简化代码中，我也无法使其工作。 – ruffle

除非你需要inline-block的row1-header删除并清除浮动。目前，它不是它自己的块元素，并且试图用前面的行作为内联元素进行样式化。

html, 
 
body, 
 
div, 
 
span { 
 
    vertical-align: baseline; 
 
} 
 

 
#row1 { 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 

 
#row1-col1 { 
 
    max-width: 570px; 
 
} 
 

 
.row1-header { 
 
    display: block; 
 
    padding-top: 10px; 
 
    clear:both; 
 
} 
 

 
.button-left { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-bottom: 5px; 
 
} 
 

 
.button-right { 
 
    display: inline-block; 
 
    float: right; 
 
    margin-bottom: 5px; 
 
}

<div id="row1"> 
 
    <div id="row1-col1"> 
 
    <span class="button-left"><a href="#1">Previous</a></span> 
 
    <span class="button-right"><a href="#2">Next</a></span> 
 
    <br> 
 
    <div class="row1-header"> 
 
     Hello 
 
    </div> 
 
    <!--close row1-header--> 
 
    </div> 
 
    <!--close row1-col1--> 
 
</div> 
 
<!--close row1-->

来源

2017-08-30 22:56:40

这就行了。谢谢！事实上'明确：两者都是'对自己的作品。 – ruffle

为什么这个HTML元素开始缩进，我怎样才能让它从左边的页边开始？

回答

相关问题