1

我正在尝试使用 css 将图像放置在伪输入框的右侧以模仿 Apple 的 iMessage 应用程序。但是，图像一直显示在伪输入框下方，如下所示：

在此处输入图像描述

大多数答案都建议使用 display:inline-block ，我已经把它放在类中，用于外部和内部 div，但没有运气。（也尝试过 float:left、float:right 和 display:inline-block on image，没有区别。）

当麦克风图像在下方时，如何使箭头出现在伪输入框的右侧？

在此处输入图像描述

这是我的输入字段代码：

css:

.inputbox {
border-radius: 20px;
  min-height: 30px;
  width: 300px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: solid 2px #EEE;
  display: inline-block; 
}
.inputBoxInner {
  border-radius: 20px;
  min-height: 30px;
  width: 240px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: solid 2px #EEE;
  height:" auto";
  display: inline-block; 
}
.inputBoxInner:empty:not(:focus):before {
  color: lightgrey;
  font-family: helvetica;
  content: attr(data-placeholder)
  display: inline-block; 
}

html:
<div class = "inputBox" contentEditable="true"><div class="inputBoxInner" contenteditable="true" data-placeholder="Start typing"></div><input type="image" id="image" alt="Send"
       src="/images/arrow.png" width="30" height="30 style="float:right"; "></div>
4

2 回答 2

1

代码有问题： 在此处输入图像描述

这段代码可以解决这个问题：

真实代码：

输入框{显示：网格；网格模板列：100px 100px}

于 2021-08-09T18:48:37.130 回答
0

这应该为你做

.inputbox {
    border-radius: 20px;
      min-height: 30px;
      width: 300px;
      padding: 8px 15px;
      margin-top: 5px;
      margin-bottom: 5px;
      border: solid 2px rgb(0, 0, 0);
    }
    .inputBoxInner {
      border-radius: 20px;
      min-height: 30px;
      width: 240px;
      padding: 8px 15px;
      margin-top: 5px;
      margin-bottom: 5px;
      border: solid 2px rgb(131, 131, 131);
      height: auto;
      display: flex;
      justify-content: end;
      align-content: center;
 
    }
    .inputBoxInner:empty:not(:focus):before {
      color: rgb(255, 0, 0);
      font-family: helvetica;
    }
<body>
    <div class = "inputBox" contentEditable="true">
        <div class="inputBoxInner" contenteditable="true" data-placeholder="Start typing">
            <input type="image" id="image" alt="Send" src="image.png" width="30" height="30" style="float:right">
        </div>
    </div>
</body>

于 2021-08-09T19:18:54.990 回答