Question

我已经看过一些关于这个问题的帖子，但现在没有什么对我有用。我有一个div，里面有很多跨度。跨度正在运行页面。任何人都可以帮助我，请将它们包裹起来以保持在页面上吗？

HTML：

    <div id="creditsbar">
<span class="title">Writing</span> <span class="name">Bob, Mary</span> 
<span class="smallsquare">&#9632;</span> 
<span class="title">Editing</span> 
<span class="name">Mary, Bob</span> 
<span class="smallsquare">&#9632;</span> 
<span class="title">Design</span> 
<span class="name">Bob</span> 
<span class="smallsquare">&#9632;</span> 
<span class="title">Development</span> 
<span class="name">Mary</span> 
<span class="smallsquare">&#9632;</span>
</div>

CSS：

#creditsbar {
    width: 100%;
    background color: lightgray;
    color: #333;
    font-family: "Muli", Helvetica, Arial;
    padding-left: 20%;
    max-height: 10%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    padding-bottom: 10px;
    max-width: 100%;
    vertical-align: top;
}
    #creditsbar span {
        word-wrap: normal;
        display: inline-block;
    }
    #creditsbar .title {
        text-transform: uppercase;
        font-size: 80%;
        font-weight: 600;
        padding-right: 5px;

    }
    #creditsbar .name {

    }
    #creditsbar .smallsquare {
        padding: 0 10px;
    }

Answer 1

这是因为里面有padding-left: 20%;

#creditsbar {
width: 100%;
color: #333;
font-family: "Muli", Helvetica, Arial;
padding-left: 20%;
}

删除该行，它将正常工作

否则按照@Andy

的建议使用box-sizing: border-box;

div内的div跨越页面

1 个答案: