변경하여 요소의 위치는 CSS를

나는 여기에이변경하여 요소의 위치는 CSS를

Name 
tbFirstName lblFirstName tbLastName lblLastName

같은 내가 궁금해서 그것을

<div class="editor-label"> 
    <label>Name:</label> 
</div> 

<div class="editor-field"> 
<span> 
    <input id="LastName" name="LastName" type="text" value="" /> 
    <label for="LastName">Last Name</label> 
</span> 
<span> 
    <input id="FirstName" name="FirstName" type="text" value="" /> 
    <label for="FirstName">First Name</label> 
</span> 
</div>

에 대한 HTML 태그 인 div의에 싸여 입력이있는 웹 양식을 보이는 것을 내가 출력을 변경할 수있는 방법에 대신 CSS에게 어떤 도움

Name 
tbFirstName tbLastName 
lblFirstName lblLastName

감사를 사용하여 다음과 같이합니다.

출처

2010-11-19 zSynopsis

.editor-field span {float: left; margin-right: 10px;} // the margin is optional 
.editor-field input {display: block;}

출처

2010-11-19 18:41:51 Tom

감사합니다. – zSynopsis

틱을 주셔서 감사합니다 ... "display : block;"은 입력을 블럭 레벨 요소로 바꾸어줍니다 (자연스런 줄 바꿈과 몇 가지 다른 것들을 추가합니다). 입력이 기본적으로 인라인 요소입니다. – Tom

감사합니다. tom. 입력 전에 label 요소의 위치를 이동하려면 에디터 필드 입력 부분을 .editor-field span label {display로 변경해야합니다. : block;} 또는 다른 일이 필요합니까? – zSynopsis

입력 전에 레이블을 옮겼습니다. 완벽하게 작동

.editor-field span {float:left;} 
.editor-field span label {display:block;}

마크 업

<div class="editor-label"> 
    <label for="Certnum">Name:</label> 
</div> 

<div class="editor-field"> 
<span> 
    <label for="Certnum">Last Name</label> 
    <input id="LastName" name="LastName" type="text" value="" /> 
</span> 
<span> 
    <label for="Certnum">First Name</label> 
    <input id="FirstName" name="FirstName" type="text" value="" /> 
</span> 
</div>

출처

2010-11-19 18:43:51

이것은 작동하지 않는 것 같습니다. 레이블이 아래가 아닌 입력 위에 표시됩니다. – zSynopsis

@zSysop - CSS 위에서 위의 내 의견을 읽었을 때, 입력 전에 레이블을 옮겼습니다. 그러나 내가 작성한 CSS를 사용하여 마크 업과 스타일을 동일하게 유지하고 스타일을 잘 적용 할 수 있습니다. –

변경하여 요소의 위치는 CSS를

답변

관련 문제