라인의 선택 상자의 적절한 정렬

세 개의 선택 드롭 다운 상자 (왼쪽 정렬, 가운데 맞춤 및 오른쪽 정렬) 사이에 같은 공간을 두어야합니다. 라인의 선택 상자의 적절한 정렬

나는 다음과 같은 CSS로 몇 가지 미리 정의 된 templets을 사용하고 있습니다 : 난 그냥 그 밖의 무엇을 내가 CSS에 추가 할 수있는 궁금

.view-display-id-page .views-widget-filter-tid { 
    float: left; 
    margin: auto; 
    width: 30%; 
} 

.view-display-id-page .views-widget-filter-tid_1 { 
    float: left; 
    margin: auto; 
    width: 30%; 
} 

.view-display-id-page .views-widget-filter-tid_2 { 
    float: left; 
    margin: auto; 
    width: 30%; 
}

작동하도록?

출처

2017-05-08 viz12

지금은 어떻게됩니까? – Darren

그림을 첨부했습니다 (두 번째 줄). – viz12

예, 대답 중 하나를 수락했습니다. – viz12

margin:auto은 float에서 작동하지 않습니다. 센터 항목에 margin을 추가하십시오.

.view-display-id-page .views-widget-filter-tid_1 { 
    float:left; 
    margin: 0 5%; 
    width:30%; 
}

출처

2017-05-08 21:00:17 Blazemonger

그것은 일했다! 감사 ! – viz12

여기 내 코드입니다. 먼저 세 요소를 모두 가운데에 놓은 다음 가운데 드롭 다운 상자에 동일한 왼쪽 여백과 오른쪽 여백을 추가하십시오.

<html> 
<style type="text/css"> 
/** all the three elements are centred*/  
    .main 
    {width: 400px; 
     height: 100px; 
     text-align: center; 
     margin: 200px auto 20px auto;} 
/** provide the necessar spacing you need**/ 
    .centre{margin: 0px 50px 0px 50px;} 

    </style> 


<body> 
<form> 

    <div class="main"> 
    <select class="left"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select> 
    <select class="centre"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select> 
    <select class="right"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select> 
     </div> 
    </form> 
    </body> 

</html>

출처

2017-05-08 21:23:52 bhuvaneshnick

라인의 선택 상자의 적절한 정렬

답변

관련 문제