it-swarm-ko.com

CSS를 사용하여 HTML 문서에 줄 바꿈을 삽입하는 방법

웹 서비스를 작성 중이며 데이터를 XHTML로 반환하고 싶습니다. 데이터는 마크 업이 아니라 데이터이므로 추가 <div> 나 <span>없이 매우 깨끗하게 유지하고 싶습니다. 그러나 개발자의 편의를 위해 브라우저에서 반환 된 데이터를 합리적으로 읽을 수있게하고 싶습니다. 그렇게하기 위해 CSS를 사용하는 것이 좋은 방법이라고 생각합니다.

내가 구체적으로하고 싶은 것은 특정 장소에 줄 바꿈을 삽입하는 것입니다. display : block을 알고 있지만 현재 처리하려고하는 상황에서는 실제로 작동하지 않습니다-<input> 필드가있는 양식. 이 같은:

<form>
  Thingy 1: <input class="a" type="text" name="one" />
  Thingy 2: <input class="a" type="text" name="two" />
  Thingy 3: <input class="b" type="checkbox" name="three" />
  Thingy 4: <input class="b" type="checkbox" name="four" />
</form>

각 레이블이 해당 입력 필드와 동일한 줄에 표시되도록 렌더링하고 싶습니다. 나는 이것을 시도했다 :

input.a:after { content: "\a" }

그러나 그것은 아무것도하지 않는 것 같습니다.

htmlcss
38
Craig Andera

모든 요소를 ​​레이블 요소로 묶은 다음 CSS를 레이블에 적용하는 것이 가장 좋습니다. : before 및 : after 의사 클래스는 일관된 방식으로 완전히 지원되지 않습니다.

라벨 태그는 접근성 향상 (여러 수준에서) 등을 포함하여 많은 장점을 가지고 있습니다.

<label>
    Thingy one: <input type="text" name="one">;
</label>

그런 다음 라벨 요소에 CSS를 사용하십시오 ...

label {display:block;clear:both;}
54
BrewinBombers

양식 컨트롤은 브라우저에서 특별히 처리되므로 많은 기능이 반드시 제대로 작동하지는 않습니다. 이러한 것 중 하나는 컨텐츠로 생성됩니다. 양식 컨트롤에서는 작동하지 않습니다. 대신 라벨을 <label> 및 label:before { content: '\a' ; white-space: pre; }. 모든 것을 띄우고 clear: left 로 <label> 요소.

41
Jim

목록에 표시 할 양식 항목이 여러 개있는 것 같습니다. 흠 ... 그 HTML 사양 사용자 만 항목 목록을 처리하기 위해 마크 업을 포함한다고 생각한 경우 ...

다음과 같이 설정하는 것이 좋습니다.

<form>
  <ul>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
 </ul>
</form>

그러면 CSS가 훨씬 쉬워집니다.

12
Jon Galloway

다음은 줄 바꿈을 제공합니다. 그것은 또한 여분의 공간을 앞에두고있을 것입니다 ... 탭을 제거하여 소스 들여 쓰기를 엉망으로 만들어야합니다.

form { white-space: pre }
4
Jimmy
<form>
   <label>Thingy 1: <input class="a" type="text" name="one" /></label>
   <label>Thingy 2: <input class="a" type="text" name="two" /></label>
   <label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
   <label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>

그리고 다음 CSS

form label { display: block; }
2
daniels
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>
2
Galen

하나의 옵션은 (일부) 브라우저에서 웹 서비스 소비자에게 영향을 미치지 않는 마크 업, CSS, 색상 등으로 프리젠 테이션을 포함 할 수 있도록 처리 할 XML 내에 XSLT 템플릿을 지정하는 것입니다.

XHTML에서 CSS를 사용하여 요소 주위에 패딩을 추가 할 수 있습니다 (예 :.

form input.a {margin-bottom : 1em}

2
DamienG

비밀은 클래스가 블록을 수행하고 지우는 범위에서 전체 항목, 레이블 및 위젯을 둘러싸는 것입니다.

<style type="text/css">
.lb {
display:block;clear:both;
}
</style>

<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>
1
D-n Russler

자바 스크립트 옵션은 모두 복잡합니다. Jon Galloway 또는 daniels0xff가 제안한대로하십시오.

0
lordscarlet

나는 John Millikin에 동의합니다. CSS 클래스가 정의 된 <span> 태그 또는 각 줄 주위에 무언가를 추가 한 다음 필요한 경우 표시 : 차단할 수 있습니다. 내가 이것을 생각할 수있는 유일한 다른 방법은 <input>를 인라인 블록으로 만들고 그것들을 "매우 큰"패딩-오른쪽으로 방출하여 인라인 내용을 마무리하는 것입니다.

그럼에도 불구하고 가장 좋은 방법은 데이터를 논리적으로 <span> 태그 (또는 유사)로 그룹화하여 데이터가 함께 속해 있음을 나타내는 것입니다 (CSS가 위치 지정을 수행하도록 함).

0
Thunder3

CSS clear 요소는 아마도 get linebreaks를 찾는 것입니다. 따라야 할 것 :

# 로그인 양식 입력 {clear : both; }

다른 부동 요소가 입력 필드의 양쪽에 남아 있지 않아야합니다.

참조

0
Leo Utskot