HTML 동일한 행에 맞추기

Question

좋아요. 근본적으로 저는 이런 식으로 제 페이지를 원합니다.

(버튼) (보더 번호) (버튼)

이 모든 다른 테두리가 될 것입니다 명심하십시오. 코드는 일종의

이의 같은 :

<button>TEST</button> <p>4</p> <button>TEST</button> 

그래서 어떻게 올바르게 정렬을 만들 것? 숫자 4가 가운데에 오도록 버튼을 놓고 오른쪽과 왼쪽 버튼은 같은 줄에 있어야합니다.

Answer 1

<span><button>TEST</button></span><span> <p>4</p> </span><span><button>TEST</button></span> 

이것은 올바르게 작동합니다. < SPAN> 탭 작업 인라인

Answer 2

CSS는

span.numborder { 
display:inline-block; 
border:1px solid #000000; 
padding:2px; 
} 

HTML (이주는 숫자 주위에 상자를 만드는) 때문에

<button>TEST</button> <span class="numborder">4</span> <button>TEST</button> 

Answer 3

나는 테이블

<table> 
    <tr> 
     <td> <button>TEST</button> </td> 
     <td> <p>4</p> </td> 
     <td> <button>TEST</button> </td> 
    </tr> 
</table> 

을 사용하는 것이 좋습니다 것입니다 HTML을 완성하는 데는 약간 시간이 걸리지 만 lin에 있어야하는 다른 요소를 쉽게 추가 할 수 있습니다. 같은 방식으로 편집.

JSFiddle : http://jsfiddle.net/JHgyy/

Answer 4

사용 display: inline-block. 당신이 컨테이너가이 규칙

DEMO에 따라 그래서 다음 페이지에 대한 모든 요소가 정렬되지이다에

DEMO http://jsfiddle.net/x7vpU/

button, p { 
    display: inline-block; 
} 

클래스를 지정 정렬하고자하는 요소에이 할당 당신이 다음 span 대신 <p>의를 사용하는 경우 http://jsfiddle.net/x7vpU/1/

<div class="buttons-row"> 
    <button>TEST</button> <p>4</p> <button>TEST</button> 
    </div> 

    .buttons-row button, .buttons-row p { 
     display: inline-block; 
    } 

당신은 N하지 않습니다 http://jsfiddle.net/x7vpU/3/

<p><button>TEST</button> <span>4</span> <button>TEST</button></p>