div 내에 2 개 요소 만들기

Question

블록 내에 2 개의 요소를 만들어야하지만 어떤 이유로 "이름"& "Bob"이 다른 행으로 이동합니다.

HTML

<div class=".div" style="padding-left: 50px"> 
     <h3 style="padding-right: 5px;float: left;padding-bottom: 23px;">Name:</h3> 
     <span class="pt_name" style="block">Bob</span> 
</div> 

CSS

#div{ 
    height:100px; 
    width:100%; 
    background-color:green 
} 

바이올린

http://jsfiddle.net/LMKw7/ 

Answer 1

h3이 아래로 밀고있다 브라우저의 기본 스타일에서 margin-top 암시있다. margin-top: 0으로 설정하면 개선 된 것을 볼 수 있습니다.

또한 인라인 스타일이 아닌 CSS를 사용하는 것이 좋습니다.

Answer 2

처음에 #을 사용했기 때문에 div이라는 ID를 사용하여 div에 스타일을 부여했습니다. 모든 div에 추가하려면 div { ... }을 사용하면됩니다.

Answer 3

사용 display:inline-block;

<h3> 및 <span> <span> 내에서 텍스트가 새로운 부르게이 편집 한에 fiddle.May이 당신을 도울 수있을 것입니다 나타나는 것을 또한 때문에 다른 글꼴 크기의

:

http://jsfiddle.net/LMKw7/2/

Answer 4

두 가지 :

차라리 012 "보다는 H3에"display: inline-block; "을 설정하는 더 나은 운이".

"div"는 요소 유형 뒤에 선택자의 이름을 붙여 혼동을 줄 수 있습니다. 어쨌든, 클래스에는 일반적으로 점이 없습니다. 점으로 CSS에 클래스를 선택하기 만하면됩니다. # 태그는 ID를 나타냅니다.

<div class="myDiv" ...

(CSS) :

.myDiv { 

그래서, 정확한 모양이 될 것이다