如何讓div寬度適合其內容，下一個div來填充剩餘部分？

-1

我試圖讓input[type=text]的div適合InputDivMain中剩餘空間的整個寬度。我不知道如何讓InputDivTitle div只有它的內容一樣寬，也沒有更多。在僅適合其內容的寬度之後，我想要InputDiv填充剩餘的空白，使其內部的輸入填充該div的100％。如何讓div寬度適合其內容，下一個div來填充剩餘部分？

這是我的HTML：

<div class='Segment'> 
    <div class='DisplayTable InputDivMain' id='MainDiv_01'> 
    <div class='DisplayTableCell InputDivTitle'>Search by ID</div> 
    <div class='DisplayTableCell InputDiv'> 
     <input class='w3-input' type='text'> 
    </div> 
    </div> 
    <div> 
    <input type="button" value="Search"> 
    </div> 
</div> 
<div class='Segment'> 
    <div class='DisplayTable InputDivMain' id='MainDiv_02'> 
    <div class='DisplayTableCell InputDivTitle'>Search by Number</div> 
    <div class='DisplayTableCell InputDiv'> 
     <input class='w3-input' type='text'> 
    </div> 
    </div> 
    <div> 
    <input type="button" value="Search"> 
    </div> 
</div>

這是我的CSS：

.DisplayInline { 
    display: inline-block; 
} 

.DisplayTableCell { 
    display: table-cell; 
    vertical-align: middle; 
} 

.DisplayTable { 
    display: table; 
} 

.Segment { 
    margin-bottom: 20px; 
} 

.InputDivMain { 
    box-sizing: border-box; 
    margin-bottom: 5px; 
    border-bottom: 1px solid #009688; 
    display: table; 
    width: 100%; 
} 

.InputDivMain:hover { 
    cursor: text; 
} 


.InputDiv { 
    overflow: auto; 
    border: 1px solid red; 
    width: auto; 
    box-sizing: border-box; 
} 

.InputDiv > input[type=text] { 
    border-bottom: 0px; 
    width: 100%; 
} 

.InputDiv > input[type="text"]:focus { 
    outline: none; 
} 

.InputDivTitle { 
    box-sizing: border-box; 
    border: 1px solid green; 
    color: #009688; 
    font-size: 120%; 
    padding-left: 5px; 

} 

input[type="button"] { 
    width: 100%;; 
}

請幫幫忙！

編輯：對不起，我完全忘了添加我的JSFiddle鏈接。 https://jsfiddle.net/ytsvzyc6/

來源

2017-05-26 Monil

雖然可以讓左邊的div與內容一樣寬，右邊的div也可以佔用其餘的內容，但是使用CSS單獨調整右邊div中與其父代一樣寬的輸入是非常棘手的。你能用JavaScript嗎？ –

可能重複[如何使div不大於其內容？]（https://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents） – AvrilAlejandro

是的，我可以使用JavaScript。我怎麼能用JS來解決這個問題？ @MrLister – Monil

你應該把

的float那麼元素只佔其內容
的overflow: hidden;導致下一個內容佔據的剩餘空間

.InputDivTitle{ 
    float: left; 
} 
.InputDiv{ 
    position: relative; 
    overflow: hidden; 
}

see JSFiddle

來源

2017-05-26 15:17:49 AvrilAlejandro

謝謝！然而，這確實有效，因爲有一個浮點數，「InputDivTitle」中的文本現在位於InputDivMain的頂部，而不是垂直位於中心。我嘗試在'InputDivTitle'類中添加'display：inline-block'和'vertical-align：middle'，但這似乎不起作用。你能幫忙嗎？ – Monil

你可以使用'line-height'道具 – AvrilAlejandro

謝謝！這工作。 – Monil

您可以將顯示設置爲內嵌塊，以便您想要對其內部內容進行緊縮。

display: inline-block

How to make div not larger than its contents?

來源

2017-05-26 15:02:09 ChekTek

這隻涉及問題的一小部分。 –

如何讓div寬度適合其內容，下一個div來填充剩餘部分？

回答

相關問題