display : table-cell로 정렬 된 항목의 가로 목록이 있습니다.
중간 항목은 콘텐츠 길이가 다를 수 있으며 그에 따라 확장되어야합니다. 그리고 분명히 그 형제는 공간을 확보하기 위해 축소되어야합니다.
지금까지 내가 한 작업의 예는 다음과 같습니다.
http://codepen.io/Pictor13/pen/mJoyXw
그러나 콘텐츠가 커질 때 중간 항목은 여전히 오른쪽 형제 위로 넘칩니다.
내가 원하는 것을 얻을 수 있습니까? 인가 display: table-cell및 white-space: nowrap올바른 접근 방식은?
참고 : 지정된 경우 너비는 항상 일반적이어야하며 특정 px / em으로 고정되지 않아야합니다.
Wellll .... flexbox할 수 있습니다.
.container {
background-color: yellow;
padding: 1px;
}
li {
text-align: center;
border: 2px solid #ccc;
background-color: green;
color: red;
list-style: none;
}
ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
margin: 3px;
background-color: brown;
}
li {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
input {
width: 270px;
width: inherit;
}
form {
background-color: blue;
margin: 0;
padding: 0;
}<div class="container">
<ul class="list">
<li>B</li>
<li>C</li>
<li class="middle">
<form>
<input type="number" value="123123418190238901390812903823" min="1" max="123012301232138192738798127398712983" />
<span>to page and with some long content</span>
<button>go</button>
</form>
</li>
<li>E</li>
<li>A</li>
</ul>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다