CSS 액체 수평 목록

, 나는 명확히하려고합니다 :CSS 액체 수평 목록

Some text like this - Some text like this - Some text like this - Some text like this - Some text like this

이 100 % 폭을 중심으로 컨테이너입니다 :

나는 세트를 예를 들어 3 ~ 6 단어의 6 개 문장을 가지고있다.

제가 작업하고있는 사이트는 내용에 액체 너비를 사용하고 있으므로 더 작은 해상도에서는 텍스트를 줄 바꿈하고 싶습니다. 나는 작은 해상도에서 '랩'을 말할 때 나는 다음과 같이 할 :

some some some some some some 
text text text text text text 
like like like like like like 
this this this this this this

그래서 난 텍스트가 % 폭 사업부에서 포장 할 텍스트의 단락과 같은 포장합니다.

내가 그나마 텍스트는 다음과 같이 표시 할 :

이

Some 
text 
like 
this 

Some 
text 
like 
this 

Some 
text 
like 
this

희망이 더 의미가?

감사

=====

편집 =============== 나는 시도하고이를 달성하기 위해 시간의 마지막 몇 노력 해왔다

및 나는 이제 막 포기하려한다.

간단하지만 나는 원하는 효과를 얻을 수 없으며 실제로 가능할 지 궁금해지기 시작했습니다. 기본적으로

, 나는 액체 사이트 레이아웃을하고 난 텍스트 중심의 수평 목록 다른 해상도의 랩을 갖고 싶어 :

enter image description here

브라우저가 때 첨부 이미지에서 볼 수 있듯이 더 큰 해상도에서 나는 텍스트를 중앙에 놓기를 원하지만 더 낮은 해상도에서는 제대로 감쌀 것이다.

나는 여러 가지를 시도했다. display: inline, display: block, 부동 등하지만 원하는 결과를 얻을 수 없습니다.

바라건대 말이 되네.

출처

2012-03-07 Burns

콘텐츠의 HTML 구조는 무엇입니까? 미디어 쿼리를 사용하고 있습니까? – j08691

설명해 주셔서 감사합니다. 목록의 요소 수가 유연해야합니까? 그렇다면, 나는 그것이 css에서 순전히 할 수 없다고 믿습니다. 오히려 일부 요소 (javascript)를로드하고 li 요소의 너비를 설정 한 후에 javascript (jQuery)를 실행해야합니다. –

감사합니다. 단 6 개의 문장으로만 작성하면 안됩니다. – Burns

HTML :

<ul> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    </ul>

CSS : 어쩌면이 같은

이

ul { 
overflow:hidden; 
width:100%; 
} 
li { 
white-space:nowrap; 
float:left; 
}

출처

2012-03-07 14:53:52 user1249757

안녕하세요, 고마워요.하지만 내가 의미하는 바를 오해했다고 생각합니다. 저해상도에서는 텍스트를 모두 같은 줄에두고 싶지만 문장은 길게 줄여야합니다. 이게 말이 돼? – Burns

뭔가 :

<html> 
<head> 
    <style> 
     .margin{width:2%; float:left;} 
     .column {width:16%; float:left; text-align:center;} 
    </style> 
</head> 
<body> 

    <div class="margin">&nbsp;</div> 
     <div class="column">Some text like this</div> 
     <div class="column">Some text like this</div> 
     <div class="column">Some text like this</div> 
     <div class="column">Some text like this</div> 
     <div class="column">Some text like this</div> 
     <div class="column">Some text like this</div> 
    <div class="margin">&nbsp;</div> 

</body> 
</html>

출처

2012-03-07 18:11:12 jim31415

대단히 감사합니다!정확히 내가 무엇을 찾고 있었는지. 나는 그것이 단순하다는 것을 알고, 다만 그것의 주위에 얻지 않을 수 있었다. 다시 한번 감사드립니다. – Burns

한 가지, 각 텍스트 블록 사이에 공백이있을 수 있습니까? 각 열의 개별 너비로 놀 필요가 있습니까? – Burns

아마도 패딩 설정을 시도해보십시오 : 0 5px; 컬럼 클래스에서. – jim31415

CSS 액체 수평 목록

답변

관련 문제