여러 단어로 된 어구 ('인권'등)를 제외하고 고른 공백 단어

'인권'과 같은 여러 단어로 된 어구를 제외하고 한 줄을 채우기 위해 어떻게 단어를 균등하게 배치 할 수 있습니까? 아래와 같은 효과를 내기 위해서?여러 단어로 된 어구 ('인권'등)를 제외하고 고른 공백 단어

activism human rights etc

출처

2012-06-15 tog22

당신을 탐색 메뉴에 대한 HTML 목록을 사용한다 : 여기

튜토리얼하지만, 다른 많은 것은 당신이 그들을 구글 경우 : http://jamesowers.co.uk/css-tutorials/50/horizontal-css-list-menu/

그 뒤에

이유 : CSS를로드하지 않는 경우

메뉴가 좋은 모양은
당신이 항목의 목록을 표시하는, 의미 론적 접근을
을하는 데 도움이 지원되지 않습니다/- 그래서에 목록보다 더 나은 무엇 그들을 표시합니까?

편집

가장 쉬운, HTML/CSS는, 해결책은 테이블을 사용하는 것입니다, 그러나 내 눈은 레이아웃에 사용되는 테이블의 광경에 구울 수 있습니다. http://jsfiddle.net/nTM3S/

<table cellpadding="3" class="myTable" style="text-align:center"> 
     <tr> 
      <td>Politics</td> 
      <td>Environment</td> 
      <td>Economics</td> 
      <td>Culture</td> 
      <td>Human Rights</td> 
      <td>Politics</td> 
      <td>Environment</td> 
      <td>Economics</td> 
      <td>Culture</td> 
      <td>Human Rights</td> 

     </tr> 
    </table>

과 CSS :

td { 
    width: 1%; 
    padding: 20px; 
    white-space: nowrap; 
    background-color: #ccc; 
    color: #900; 
}

출처

2012-06-15 10:56:30 Luca

하지 대답 내 질문에 – tog22

에 나는에 편집 섹션을 추가 한 내 대답 – Luca

감사합니다, 그 작품 – tog22

따라서 (적절히 패딩을 조정)이 균등하게하려는 텍스트의 라인에 text-align: justify;을 적용하고 ('인권'와 같은) 여러 단어 문구를 쓰기 :

<span style="padding-right:3px;">Human</span>rights

출처

2012-06-15 10:52:55 tog22

바이올린 여기 (당신이 제공 할 브라우저 지원에 따라 ul li 또는 중첩 div 태그와 CSS를 display:table-cell/table-row 등 넘어갈 수 있음)

<ul>에 아이템을 넣고 각각에 여백을 추가하십시오 <li>

참조 데모 : http://jsfiddle.net/L8qnh/3/

HTML을

<ul> 
    <li>Politics</li> 
    <li>Enviroment</li> 
    <li>Economics</li> 
    <li>Human Rights</li> 
    <li>Country</li> 
</ul>

CSS는

ul{ 
    list-type:none; 
} 

li{ 
    float: left; 
    margin-right: 40px; 
}

출처

2012-06-15 11:00:11

아, 내가 고르지 공간을 (즉, 완전히 정당화) 단어를 선을 채우기 - 하드 코딩 'margin-right : 40px;는 이것을하지 않을 것임을 분명히하기 위해 편집 된 질문. – tog22

이가에서 일하고 싶어하는 브라우저에 따라, 귀하의 질문에 대한 대답은 간단 할 수있다 같이 지키고 자하는 문구에  을 넣으십시오.

Politics Enviroment Economics Human Rights Country

그리고이 모든 일을 정당화. jsFiddle을 참조하십시오.

아쉽게도 모든 브라우저에서 작동하지는 않습니다. IE8과 Opera에서는 괜찮습니다.하지만 Firefox와 Chrome은 다른 공간과 마찬가지로 nbsp를 확장합니다.

출처

2012-06-15 12:15:25

나는 각 요소에 대해 사업부를 사용하고 ... 인라인 자신의 디스플레이 속성을 설정 및 예제는 다음과 같습니다

<html> 
<head> 
    <style type="text/css"> 
     .food{ 
      padding:5px; 
      display:inline; 
     } 
    </style> 
</head> 
<body> 
    <div class="food">Hamburger</div> 
    <div class="food">Pizza</div> 
    <div class="food">Hot Dog </div> 
    <div class="food">Chicken</div> 

</body> 
</html>

출처

2012-06-15 12:16:27 Fran

은 패딩을 언급하는 것을 잊어 버렸지 만, 요소 사이의 공간을 설정하는 속성이 분명하다고 생각합니다! ;-) – Fran

아, 라인을 채우기 위해 단어를 균등하게 배치 (즉, 완전히 정당화)하고자하는 질문을 편집했습니다. - 하드 코딩 패딩 : 5px; 그렇게하지 않을거야. – tog22

여러 단어로 된 어구 ('인권'등)를 제외하고 고른 공백 단어

답변

관련 문제