만들기 목록은 자바 스크립트

Question

없이 입력 태그의 폭은 HTML의 다음 코드를 생각해 보자. (목록에는 실제 항목이 있지만 물건을 간결하게 유지하려면 여기를 버렸습니다.) 이제 CSS를 사용하여 목록의 너비를 제어 할 수 있으며 입력 태그와 마찬가지로 목록의 너비를 제어 할 수 있습니다.

입력 태그를 기본 너비로두고 목록 폭의 너비가 일치하도록하고 싶습니다. 물론 JavaScript의 getComputedStyle을 사용할 수 있습니다. 이론 상으로는 사용자가 자바 스크립트를 사용 중지하면 문제가 발생할 수 있지만 사실 실제로 (매우 최소한의) 자동 완성 위젯 (Wikipedia에서와 같이 멋지지만)을 코딩하기 때문에 자바 스크립트 없이는 작동하지 않습니다.

하지만 여전히 가능합니까? 나는 CSS에 관해서는 기본적으로 아무 것도 모르므로, 이것이 명백해야만한다면 용서해주십시오. 당신이 새로운 CSS 표준을 사용하여 너무 싫어하지 않은 경우

Answer 1

일반적으로, 당신과 함께 display:table 또는 display:table-cell (가 익명의 객체가 다른 하나를 위해 만들어지는 중요하지 않음)로 설정 래퍼 요소와이 작업을 수행 할 것 매우 작은 지정된 너비. 래퍼의 사용 된 너비는 적어도 입력 상자의 너비와 같아야하며 그런 다음 목록은 그 안에 들어갑니다.

(데모 CSS와 요셉 Marikle의 대답에서 차용 HTML 마크 업)

.wrapper { 
 
    display: table; 
 
    width:1px; 
 
} 
 

 
/* for demo only */ 
 
ul{list-style-type:none;padding:0;margin:0;background:#ae0}.wrapper{margin-bottom:1em;}

<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2 tetts 3 stsdgsdf stsdgsdf</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div>

Answer 2

가 일치하는 폭

Answer 3

에

<ul style = "width: 40px"> // 변경 40px 시도, 나는 인 flexbox를 사용하는 것이 좋습니다 것입니다. 명시 적 값을 설정하거나 계산할 필요없이 두 요소가 동일한 너비인지 확인하는 두 가지 방법을 채택합니다.

.wrapper { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
} 
 

 
/* for demo only */ 
 
ul{list-style-type:none;padding:0;margin:0;background:#ae0}.wrapper{margin-bottom:1em;}

<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<div class="wrapper"> 
 
    <input> 
 
    <ul> 
 
    <li>test 1</li> 
 
    <li>test 2 tetts 3 stsdgsdf stsdgsdf</li> 
 
    <li>test 3</li> 
 
    </ul> 
 
</div>