欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

同一直線上的兩個(gè)跨距

CSS

我有一個(gè)& quotdiv & quot有兩個(gè)& quotspan & quot。 A & quotspan & quot獲取用戶輸入的文本，并將其發(fā)送到后端以生成以下文本(類似于自動(dòng)完成)。 第二個(gè)& quotspan & quot是由模型生成的文本的返回，這將是一個(gè)補(bǔ)充建議。如下圖所示。

example two "span"

問題是，有時(shí)第二個(gè)文本會(huì)被覆蓋，使可視化變得尷尬。我想看看能不能把第二個(gè)& quotspan & quot在第一個(gè)& quotspan & quot。

我已經(jīng)試過用& quot左填充& quot在第二個(gè)& quotspan & quot，但在某些時(shí)候，第一個(gè)& quotspan & quot覆蓋它。

以下是代碼:

HTML-& gt；

<template>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <div class="pad-container">
   <div tabindex="1" @focus="setCaret" class="divAutocomplete">
     <span @input="sendText" @keypress="preventInput" ref="editbar" class="editable" contenteditable="true" placeholder='Digite sua busca'></span> 
     <span class="placeholder" data-ondeleteId="#editx" contenteditable="false">{{String_Text}}</span>     
   </div>
 </div>
</template>

CSS-& gt；

<style scoped>
   .pad-container {
       padding: 0;
       width: 640px;
       border-radius: 12px;
       border: medium solid;
       border-color: #0072c6;
    },
  .divAutocomplete {
       font-family: "Crete Round";
       font-size: 16px;
       border-radius: 8px;
       height: 32px;
       width: 100%;
       text-align: left;
       position: relative;
       background-color: hwb(244 16% 17% / 0.1);
       caret-color: #0072c6;
       color: #0072c6;
     },
  span {
       display: block;
       min-width: 1px;
       outline: none;
     },
 .editable {
       position: absolute;
       left: 8px;
       top: 5px;
       text-transform: lowercase;
     },
 .placeholder {
       color: gray;
       position: absolute;
       left: 8px;
       top: 5px;
       z-index: -1;
     }
</style>

"字符串文本& quot是簡單的文本，如& quot你好世界& quot或者& quot歡迎來到白宮& quot。如果可能的話，我希望它看起來像這樣:

example 2 two "span"

這樣，當(dāng)用戶鍵入文本時(shí)，第二個(gè)& quotspan & quot會(huì)保留第一個(gè)& quotspan & quot

要使建議與可編輯文本保持恒定距離，您必須:

移除位置:絕對(duì)遠(yuǎn)離兒童， 給父顯示:flex， 給第二個(gè)子顯示:inline-block和一個(gè)較小的左填充 大概就是這樣:

.parent {
  padding: 1rem;
  border-radius: 12px;
  border: medium solid;
  border-color: #0072c6;
  display: flex;
}

.editable {
  min-width: .5rem;
  background-color: hwb(244 16% 17% / 0.1);
  caret-color: #0072c6;
  color: #0072c6;
  font-weight: bold;
  outline: none;
}

.suggestion {
  padding-left: .5rem;
  display: inline-block;
}

<div class="parent">
  <div class="editable" contenteditable>This is the editable text...</div>
  <div class="suggestion">This is the dynamic suggestion...</div>
</div>