여러 줄의 레이블 정렬 - HTML, CSS

내 레이블을 정렬하는 데 문제가 있습니다.여러 줄의 레이블 정렬 - HTML, CSS

무엇 내가 지금 가지고 :

HTML :

<div class="personalinformation"> 
<label for="" class="info">Firstname:</label> 
<label for="">Bill</label> 
</div> 

<div class="personalinformation"> 
<label for="" class="info">Lastname:</label> 
<label for="">Gates</label> 
</div> 

<div class="personalinformation"> 
<label for="" class="info">Country:</label> 
<label for="">France</label> 
</div>

CSS :

.personalinformation { 
text-align: center; 
margin-left: auto; 
text-justify: inter-word; 
margin: 0 auto 1em auto; 
} 

.info { 
font-weight: bold; 
text-align: left; 
margin-right: 50px; 
}

어떻게 난 내 레이블과 같이 정렬합니까 :

출처

2017-04-14 pPeter

각 라벨의 고정 너비와 부동 좌 속성을 설정해야합니다. 코드 조각 봐 : http://www.bootply.com/wEqBL8Tvo0

감사

출처

2017-04-14 15:28:07 robertina

레이블이있는 것처럼 모든 레이블을 갖고 싶다면 페이지 중앙에 있습니까? – pPeter

모든 것을 새겨 넣는 컨테이너 div를 설정하고 특별히 너비를 설정하고 여백에 자동 속성을 사용합니다. Look : http://www.bootply.com/q9x6cX9dFj – robertina

오른쪽 칸의 컨테이너 div에 추가 공간이 있으므로 div 만 가운데에 놓이게되지만 텍스트는 그렇지 않습니다. – Darren

레이블은 양식 입력을위한 것입니다. 여기에 정의 목록을 더 많이 사용하고 있습니다. 시도 : 뭔가

<dl class="personalinformation"> 
    <dt class="info">Firstname:</dt> 
    <dd>Bill</dd> 
</dl> 
<dl class="information"> 
    <dt class="info">Lastname:</dt> 
    <dd>Gates</dd> 
    <dt class="info">Country:</dt> 
    <dd>France</dd> 
</dl>

을

dt,dd{display:inline-block; width:40%} 
dl{margin: 0} 
dt{text-align:left} 
dd{text-align:right}

출처

2017-04-14 15:22:11

처럼 HTML을 변경하지 않고, 당신은 당신의 info 클래스 CSS에 고정 폭을 제공 할 수 있습니다 :

.info { 
    font-weight: bold; 
    text-align: left; 
    width: 100px; //change this to what you want 
    display: inline-block; 
}

이 fiddle를 참조하십시오.

출처

2017-04-14 15:24:18 Darren

내가 당신이 그들을 가지고 있지만, 페이지의 중앙에 같은 모든 레이블을 갖고 싶어? – pPeter

아마 HTML을'table' 엘리먼트로 바꾸고'margin : 0 auto'을'table'에 넣을 것입니다. [updated fiddle here] (https://jsfiddle.net/darienh/c2dbbfmq/1/)를 참조하십시오. – Darren

여러 줄의 레이블 정렬 - HTML, CSS

답변

관련 문제