2014-05-15 4 views
-1

이 문제에 대한 소식을 보았지만 지금 당장은 아무 것도 작동하지 않습니다. 나는 내부에 많은 스팬이있는 div가 있습니다. 스팬이 페이지에서 실행 중입니다. 누구든지 페이지를 유지할 수 있도록 범위를 줄 수 있도록 도와 줄 수 있습니까?div 내에서 실행중인 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; 
    } 
+2

페이지에서 _ 실행하는 것을 의미합니까? –

+0

스팬이 랩핑되지 않습니다. – LauraNMS

+0

http://jsfiddle.net/4PqGm/ 원본 CSS/HTML을 사용하여 한 줄에 모두 표시됩니다. 너는 어떻게 보이고 싶어하니? 어떻게 감쌀까요? (스팬은 인라인 요소라는 것을 기억하십시오) – Aravona

답변

0

그것은 왜냐하면의 padding-left: 20%; 그 라인을 제거하고 그것을 잘

다른 작업을 사용합니다

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

내부@Andy의 제안대로

+0

또는 [Border Box Sizing] (http://css-tricks.com/box-sizing/) – Andy

+0

그래, 그것도 잘 작동합니다. 나는 대답에서 당신을 언급했다 : – mohamedrias

+0

하지만 왼쪽에 패딩이나 여백을 갖고 싶다. – LauraNMS