수평 공간/CSS

는 다음 jsfiddle을 참조하십시오 그들. 나는 그것을 할 방법을 알아낼 수 없습니다, 나는 흰색 사각형 이미지를 넣어에 의존하지 않고 방법 (범위, DIV 등)수평 공간/CSS

가 어떻게 그들 사이의 수평 공간을 추가 할 많이 해봤? (즉 나에게 볼품없는 것 같다.)

HTML :

<body> 
<div class="wrapper"> 
    <div class="whiteTitleBar"> 
     <span class="title">My Website</span> 
     <span class="navigation"> 
      <a class="navigation" href="index.html"> Home</a> 
      <span class="navigationSpace"/> 
      <a class="navigation" href="ourwork.html"> What We Do</a> 
      <span class="navigationSpace"/> 
      <a class="navigation" href="about.html"> Who We Are</a> 
      <span class="navigationSpace"/> 
      <a class="navigation" href="donate.html"> Donate</a> 
     </span> 
    </div> 

    <div class="blackHorizontalLine"></div> 
    <div class="redYouAreHereBar">HOME</div> 
    <div class="blackHorizontalLine"></div> 
    <div class="home"> 
     BLAH BLAH BLAH 
    </div> 
</div> 

</body>

CSS : 나를 위해 일한

body { 
font-family:Arial, Helvetica, sans-serif; 
margin:0px; 
background-image:url('images/bg.jpg'); 
background-repeat:no-repeat; 
background-size: 100% 100%; 
} 

div.wrapper { 
width:862px; 
margin-left:auto; 
margin-right:auto; 
border:2px solid black; 
margin-top:20px; 
margin-bottom:20px; 
} 

div.home { 
background-image:url('images/bg_home.jpg'); 
background-repeat:no-repeat; 
height:492px; 
} 

div.homeText { 
position:relative; 
left:390px; 
top:400px; 
font-size:xx-large; 
color:#ffffff; 
text-shadow: 2px 2px 3px black; 
} 

span.title { 
color:#000000; 
float:left; 
font-size:x-large; 
} 

span.navigation { 
color: #000000; 
float:right; 
} 

span.homeTagline { 
font-size: x-large; 
position:relative; 
left:65px; 
text-shadow: 2px 2px 3px black; 
} 


/* unvisited link */ 
a.navigation:link { 
color:#000000; 
text-decoration:none; 
} 

/* unvisited link */ 
a.navigation:visited { 
color:#000000; 
text-decoration:none; 
} 

/* mouse over link */ 
a.navigation:hover { 
color:#FF0000; 
text-decoration:none; 
} 

/* mouse over link */ 
a.navigation:active { 
color:#FF0000; 
text-decoration:none; 
} 



h1.white { 
color:#ffffff; 
} 

div.whiteTitleBar { 
background-color:#ffffff; 
height:50px; 
padding:10px; 
text-shadow: 1px 1px 5px #909090; 
} 

div.redYouAreHereBar { 
background-color:#ff0000; 
height:50px; 
padding:10px; 
font-size:xx-large; 
color: #ffffff; 
text-shadow: 2px 2px 5px black; 
} 


div.white { 
background-color:#ffffff; 
} 

div.red { 
background-color:#ff0000; 
} 

div.teal { 
background-color: #008080; 
} 

div.lightGray { 
background-color: #D1D0CE; 
} 

div.grayTransparent { 
background-color: #837E7C; 
opacity:0.2; 
filter:alpha(opacity=20); /* For IE8 and earlier */ 
} 

div.darkGray { 
background-color: #404040; 
} 

div.whiteTransparent { 
background-color: #ffffff; 
opacity:0.7; 
filter:alpha(opacity=70); /* For IE8 and earlier */ 
} 

div.blackBorder { 
border:2px solid black; 
} 

div.blackHorizontalLine { 
border-bottom:2px solid black; 
}

솔루션

나는 CSS이 추가

span.navigationSpace { 
    padding-left: 50px; 
}

나는이 테스트하고, 또한 (대안 솔루션으로) 일 :

span.navigationSpace { 
    margin-left: 50px; 
}

나는 이미 이러한 시도 생각하지만 어쩌면 난 그냥 변화가 나타나기 내 캐시를 삭제하는 데 필요한 및 I 어떻게 든 그것을 놓쳤다? 그것은이 밖으로 시도하는 저를 주도하기 때문에

나는 로이의 답변을 선택했습니다. 이 솔루션은 텍스트 스타일을 레이아웃 스타일과 모듈 식으로 구분하기 때문에 다른 솔루션보다이 솔루션이 더 마음에 들었습니다.

출처

2014-02-23 user3342404

a.navigation-link { 
    padding: 0px 10px; 
    word-wrap: normal; 
    display: inline-block; 
}

padding의 전체 구문은 top right bottom left이다 (그리고 다른 대답은. 내가 가지고 있지 선호 맨 오른쪽에 여백을했다),하지만 당신은 MDN에 대한 자세한 내용을보실 수 있습니다 shorthands이있다. 위 예제에서는 top-bottom right-left을 사용했습니다 (상단과 하단은 0px, 오른쪽과 왼쪽은 10px).

출처

2014-02-23 04:16:22 royhowie

이것은 내 솔루션의 완성을 도왔으며, 이는 내 게시물의 끝에 넣었습니다. – user3342404

수평 공간/CSS

답변

관련 문제