CSS - 라벨 태그로 서식 지정

의미있는 레이아웃을 만들고 CSS로 포맷하려는 양식이 있습니다. ASP.NET MVC에서 동적으로 생성되므로 일부 요소는 해당 화면에 대해 읽기 전용 일 수 있으므로 입력 태그가 아닌 텍스트로 렌더링 될 수 있습니다. 나는 폼을 정돈하고 값/값 상자를 정렬하기 위해 라벨 태그에 너비를 추가하려고 시도하고 있지만, 나는 그것들을 떠 다니는 경우에만 이것을 할 수있는 것 같습니다 (맞습니까?). 그것은 레이블 태그 뒤에 값을 렌더링 할 때 괜찮습니다. 그러나 값이 공백이면 두 태그 모두 p 태그 내에 포함되어 있어도 왼쪽 플로트가 이전 레이블과 쌓여있는 것처럼 보입니다 (블록 수준이어야 함, 그렇습니까?). 뭐가 잘못 됐어?CSS - 라벨 태그로 서식 지정

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><title> 

    Edit 

</title> 
     <!-- Next Style Section Is Just To Set Up Classes, it will be moved to .CSS file --> 
     <style type="text/css"> 
      div.FieldGroup {background-color: Blue; } 
      p.Field { display: block; } 
      span.NoteHeader { font-style: italic;} 
      label { float: left; width: 150px;} 
     </style> 
</head> 

<body> 
    <div id="main"> 


    <h2>Edit</h2> 



    <form action="" method="post"> 
     <div id="MainSection" class="FieldGroup"> 
      <fieldset> 
       <legend>Person Identification</legend> 
       <p class="Field"> 
        <label>Name:</label> 
        Name 
       </p> 
       <p class="Field"> 
        <label for="Colour">ChildStatus:</label> 
        <select id="Colour" name="Colour"> 
         <option value="10">Red</option> 
         <option value="20">Yellow</option> 
         <option selected="selected" value="30">Orange</option> 
        </select> 
       </p> 
       <p class="Field"> 
        <label for="Age">Age:</label> 
        <input id="Age" name="Age" type="text" value="" /> 

       </p> 
       <p class="Field"> 
        <label>Birthplace:</label> 
       </p> 
       <p class="Field"> 
        <label for="Reference">Reference:</label> 
        <input id="Reference" name="Reference" type="text" value="" /> 
       </p> 
      </fieldset> 
     </div> 
    </form> 
    </div> 

</body> 
</html>

건배

(PS - 나는 그들이 값을 변경할 수없는 경우 일반 텍스트 원하는만큼이 공백을 포함하는 읽기 전용 텍스트 상자에 추가 할 수 없습니다)

출처

2009-08-21 Mad Halfling

단락 요소에 레이블/입력을 래핑하는 이유가 무엇입니까? 그게 잘 작동하지만, 의미 상 div가되어서는 안됩니까? 어쩌면 내 생각에 너무 많이 생각할 수도 있지만, 내가 생각할 수있는 한가지는 p.Field 스타일에서 많은 지루한 스타일 값을 명시 적으로 설정하려는 것입니다. 브라우저가 모두 p 태그에 다른 것들을 추가하기 때문입니다 (여백 및 패딩 특히) 드물게 어떤 브라우저도 동일합니다. 최소한 div를 사용하는 경우 대부분의 브라우저는 모든 스타일 기본값이 0 또는 공백 인 컨테이너로만 처리해야합니다. –

시도해보기 위해 변경했지만 문제에 아무런 영향을 미치지 않습니다. –

는 명확 추가 : 모두 당신의 p.Field 선언에 : 당신은 자신의 너비를 설정하기 위해 사용자의 label의 플로트 할 필요가 없습니다

p.Field { 
    display: block; 
    clear: both; 
}

출처

2009-08-21 17:59:24 Pat

다른 폼의 누군가 다른 사람이 분명히 제안했음을 의미합니다. 왼쪽과 충분합니다. –

나는 ps를 div로 바꿨다.이게 훨씬 잘 작동했다. (ps는 VS의 기본값이었다.) –

을 라벨의 CSS에 clear : left 속성을 추가합니다.

출처

2009-08-21 16:47:54 MyItchyChin

이 작동하지 않는다는 것은 다음 입력 상자가 앞 줄의 끝까지 이동한다는 것을 의미합니다. –

, 당신은 그들의 displayblock에 변경해야합니다. 떠 다니는 경우 overflow이 hidden 또는 auto이 아닌 한 해당 블록을 포함하는 p 블록이 해당 블록을 둘러싸도록 확장되지 않습니다. label을 지우면 스태킹을 방지 할 수 있지만 모두 원하는 모양에 따라 다릅니다.

출처

2009-08-25 05:53:58

CSS - 라벨 태그로 서식 지정

답변

관련 문제