限制文本框中顯示的行數，但不限制用戶寫入

Question

我有一個案例我不知道如何弄清楚。

我試圖做一個設計，把一個按鈕放在文本框，使我的佈局看起來不錯，但是當用戶開始在文本框中輸入信息時，它隱藏在按鈕後面。我知道我有2個解決方案中的1個，但我不知道該怎麼做：

1-要麼找到另一種方式來做佈局。

2-限制用戶輸入的行數，但這樣我就會對長數據有限制。

下面是我的HTML和CSS：

body{ 
 
    background: #000; 
 
} 
 
.nl-main{ 
 
    width: 300px; 
 
    border: 1px solid white; 
 
    border-radius: 6px; 
 
    padding: 10px; 
 
} 
 

 
.header{ 
 
    padding: 3px; 
 
} 
 
.header span{ 
 
    color: white; 
 
} 
 
.nl-txt-main, .nl-btn-main{ 
 
    display: inline-block; 
 
} 
 

 
.nl-btn-main .nl-btn{ 
 
    border-radius: 5px; 
 
    background: blue; 
 
    color: white; 
 
    left: -50px; 
 
    position: relative; 
 
} 
 

 
.nl-txt-main .nl-txt { 
 
    width: 200px; 
 
    border-radius: 5px; 
 
}

<div class="header"> 
 
    <span>Search our database</span> 
 
    </div> 
 
    <div class="nl-controls"> 
 
    <div class="nl-txt-main"> 
 
     <input type="text" class="nl-txt"/> 
 
    </div> 
 
    <div class="nl-btn-main"> 
 
     <input type="button" value="Send" class="nl-btn"/> 
 
    </div> 
 
    </div>

我想要的按鈕，像文本框本身的一部分，當您嘗試運行代碼，並寫長句在文本框中，它將隱藏在按鈕下方。我如何解決它？

謝謝。

Answer 1

刪除left:-50px;從你按鍵

body{ 
 
    background: #000; 
 
} 
 
.nl-main{ 
 
    width: 300px; 
 
    border: 1px solid white; 
 
    border-radius: 6px; 
 
    padding: 10px; 
 
} 
 

 
.header{ 
 
    padding: 3px; 
 
} 
 
.header span{ 
 
    color: white; 
 
} 
 
.nl-txt-main, .nl-btn-main{ 
 
    display: inline-block; 
 
    margin:0; 
 
} 
 

 
.nl-btn-main .nl-btn{ 
 
    background: blue; 
 
    color: white; 
 
    left: -4px; 
 
    position: relative; 
 
    border-bottom-right-radius: 5px; 
 
    margin:0; 
 
    border-top-right-radius: 5px; 
 
} 
 

 
.nl-txt-main .nl-txt { 
 
    width: 200px; 
 
    border-bottom-left-radius: 5px; 
 
    margin:0; 
 
    border-top-left-radius: 5px; 
 
}

<div class="header"> 
 
    <span>Search our database</span> 
 
    </div> 
 
    <div class="nl-controls"> 
 
    <div class="nl-txt-main"> 
 
     <input type="text" class="nl-txt"/> 
 
    </div> 
 
    <div class="nl-btn-main"> 
 
     <input type="button" value="Send" class="nl-btn"/> 
 
    </div> 
 
    </div>