select관련 하나 더 질문이요
- 작성자 :
- 남*찬
- 작성일 :
- 2011-08-13 19:05:06
- 조회수 :
- 2,226
- 구분 :
- 실행환경
- 진행상태 :
- 완료
Q
select뿐 아니라 관련 컴포넌트의 css를 수정 하려면 어디를 손봐야 하는건가요.
지금 작업하는 select 태그를 옆에다가 정렬하고 싶은데 위 아래로만 정렬이 되네요.
확인부탁드립니다.
지금 작업하는 select 태그를 옆에다가 정렬하고 싶은데 위 아래로만 정렬이 되네요.
확인부탁드립니다.
A
안녕하세요^^*
각 컴포넌트의 CSS 구조는 Chrome, safari 등의 "개발자 도구"에서 확인 하시면 됩니다.
예를 들어 select의 기본코드를 개발자 도구에서 확인해보면
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="select-choice-1" class="select ui-select">선택 하시오:</label>
<div class="ui-select">
<div data-theme="d" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-d">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">사과</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
</span>
<select name="select-choice-1" id="select-choice-1">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
</div>
</div>
처럼 보여집니다.
동적으로 전환하고 싶을 때는
select의 text를 정렬하고 싶을 실 때는
<span class="ui-btn-text">사과</span> 부분이 참조 하고 있는
CSS .ui-btn-text의 text-align을 수정 하시면 됩니다.
그러나 해당 class를 수정 할 경우 .ui-btn-tex을 참조 하고 있는 다른 컴포넌트들에 영향이 있으니
참조 하시기 바랍니다.
또는 참조하는 jsp 내에
<style type="text/css">
.ui-btn-text {
text-align: left;
}
를 선언하시면 해당 텍스트가 왼쪽으로 정렬이 됩니다.
또한 jquery.mobile-1.0b1.min.css는 min 버전이므로
CSS를 쉽게 수정하고 싶으실 때는 jquery.mobile-1.0b1.css를 보시고
수정 하시면 됩니다.
감사합니다.
각 컴포넌트의 CSS 구조는 Chrome, safari 등의 "개발자 도구"에서 확인 하시면 됩니다.
예를 들어 select의 기본코드를 개발자 도구에서 확인해보면
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="select-choice-1" class="select ui-select">선택 하시오:</label>
<div class="ui-select">
<div data-theme="d" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-d">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">사과</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
</span>
<select name="select-choice-1" id="select-choice-1">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
</div>
</div>
처럼 보여집니다.
동적으로 전환하고 싶을 때는
select의 text를 정렬하고 싶을 실 때는
<span class="ui-btn-text">사과</span> 부분이 참조 하고 있는
CSS .ui-btn-text의 text-align을 수정 하시면 됩니다.
그러나 해당 class를 수정 할 경우 .ui-btn-tex을 참조 하고 있는 다른 컴포넌트들에 영향이 있으니
참조 하시기 바랍니다.
또는 참조하는 jsp 내에
<style type="text/css">
.ui-btn-text {
text-align: left;
}
를 선언하시면 해당 텍스트가 왼쪽으로 정렬이 됩니다.
또한 jquery.mobile-1.0b1.min.css는 min 버전이므로
CSS를 쉽게 수정하고 싶으실 때는 jquery.mobile-1.0b1.css를 보시고
수정 하시면 됩니다.
감사합니다.
