我不問問題，所以我不知道我標(biāo)記的代碼是否正確。

我正在制作一個(gè)偽聊天客戶端，它僅用于顯示目的。我一直試圖添加一個(gè)假& quot鍵入?yún)^(qū)域& quot和一個(gè)& quot發(fā)送按鈕& quot一起，我已經(jīng)標(biāo)記為& quot輸入欄& quot。在測試時(shí)，我注意到當(dāng)& quot屏幕& quot/viewport太窄發(fā)送按鈕& quot脫離div容器。

.typebar {
    min-width: 0;
    max-width: 620px;
    max-height: 40px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid red;
    display: flex;
    position: relative; 
    }

.typebar:before {
    content: '';
    border: 5px solid #566573;
    padding: 26px 85% 0 0;
    background: #eeeeee; 
    position: relative;
    float: left;
    cursor: text;
    }

.typebar:after {
    content: 'PESTER';
    font-weight: 600;
    border: 5px solid #566573;
    padding: 5px;
    margin-left: 1%;
    color: #eeeeee;
    background: #2C3E50;
    position: relative;
    float: right;
    cursor: pointer;
    }

<div class="typebar"></div>

問題看起來是這樣的。我添加了一個(gè)紅色的邊框，以便看到div容器應(yīng)該在哪里結(jié)束。

這是它在& quot全景& quot。

屏幕太窄時(shí)會發(fā)生以下情況。(我很肯定地知道，與這個(gè)項(xiàng)目互動的人大多是在移動設(shè)備上，這就是為什么這對我很重要。)

如果可能的話，我需要一種方法來使它如此& quot之前& quot元素可以& quot最小化& quot(如果有道理的話)更快地防止& quot在& quot元素被引導(dǎo)出div。(又名，保持所需的寬度%)

添加溢出:隱藏；將它保留在div中，但是代價(jià)是& quot發(fā)送& quot元素變成了，嗯...隱藏！不能在& quot鍵入?yún)^(qū)域& quot因?yàn)闆]有內(nèi)容，只是填充。

試圖給& quot之前& quot元素a的max-height和max-padding，但是當(dāng)屏幕變得太窄時(shí)，它只是不想停留在正確的百分比。

嘗試使用& quot大眾& quot單位(最大寬度在這里似乎不適用)，這只會導(dǎo)致兩個(gè)元素都離開div。

我還嘗試將before和after元素放入它們自己的單獨(dú)的類中(我最初沒有這樣做的原因是試圖在HTML部分使它更加精簡)，希望它們作為自己的類可能會有不同的行為。沒有。當(dāng)然，我使用了相同的代碼，除了在& quot在& quot類(內(nèi)容:“”；到內(nèi)容:& quot"；).

如果其他方法都失敗了，我可以求助于認(rèn)輸，簡單地為& quot輸入欄& quot，或者完全刪除這個(gè)區(qū)域，只讓聊天客戶端自己顯示消息)但是我真的不想這么做。

可以將position: absolute賦予帶有l(wèi)eft: 0 for ::before和right: 0 for ::after的偽元素，而不是float屬性。以下是更新后的代碼:-

.typebar {
    min-width: 0;
    max-width: 620px;
    max-height: 40px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid red;
    display: flex;
    position: relative; 
 }

.typebar:before {
    content: '';
    border: 5px solid #566573;
    padding: 26px 85% 0 0;
    background: #eeeeee; 
    position: absolute;
    left: 0;
    cursor: text;
 }

.typebar:after {
    content: 'PESTER';
    font-weight: 600;
    border: 5px solid #566573;
    padding: 5px;
    margin-left: 1%;
    color: #eeeeee;
    background: #2C3E50;
    position: absolute;
    right: 0;
    cursor: pointer;
 }

如前所述，在這里使用:before和:after是不必要的，而且會適得其反。但是你也沒有充分發(fā)揮Flexbox的潛力。(我認(rèn)為Grid是一個(gè)很好的替代方案。)總之，這里有一個(gè)快速的flex演示:

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;

.typebar {
    min-width: 0;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid red;
    display: flex;
    justify-content:space-between;
    }

.typebar .left {
    border: 5px solid #566573;
    background: #eeeeee; 
    cursor: text;
    flex-grow: 1;
    }

.typebar .right {
    font-weight: 600;
    border: 5px solid #566573;
    color: #eeeeee;
    background: #2C3E50;
    cursor: pointer;
    width: min-content;
    }

.left, .right {
  margin: 0;
}

<div class="typebar">
  <p class="left">?</p>
  <p class="right">PESTER</p>
</div>

使用相對長度單位，如百分比、vw、vh等。而不是像px這樣的絕對單位。在示例A和示例B中，寬度以vw為單位——每1vw = 1%的視口寬度。

順便說一下，使用偽元素(即::before和::after)與用戶進(jìn)行實(shí)際交互是一個(gè)壞主意，因?yàn)榫虷TML和JavaScript而言，它們并不存在——它們純粹是風(fēng)格的表現(xiàn)。只有針對實(shí)際的元素或樣式，才能間接影響偽元素。在示例B中，我添加了一些額外的CSS、HTML屬性和一個(gè)JavaScript & quotkeyup & quot事件處理程序，顯示::before區(qū)域如何模擬[contenteditable]元素。不包括作為按鈕進(jìn)行交互的::after區(qū)域(可能會涉及更多)。請記住，示例B是額外的，并不需要作為問題解決方案的一部分。

簡而言之，您最好使用& lt輸入& gt或者一個(gè)[contenteditable]和一個(gè)& ltbutton & gt或者& lt輸入類型= & quot按鈕& quot& gt然后像a & ltdiv & gt或者& ltsection & gt。

示例A

/**
 * vmin for font-size makes fonts responsive and is not required.
 * If the viewport height is less than it's width, then vh
 * is used and vice versa.
 */
:root {
  font: 5vmin/1.15 "Segoe UI";
}

.text {
  display: flex;
  width: 96vw;
  border: 5px solid red;
  overflow: hidden/* For demo purposes */;
  resize: both/* For demo purposes */;
}

.text::before {
  content: "";
  display: flex;
  align-items: center;
  width: 85vw;
  padding: 5px;
  border: 5px solid #566573;
  background: #eeeeee;
  cursor: text;
}

.text::after {
  content: 'PESTER';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  margin-left: 1vw;
  padding: 2px;
  border: 5px solid #566573;
  font-weight: 600;
  color: #eeeeee;
  background: #2C3E50;
  cursor: pointer;

<div class="text"></div>