使用 css 使图像与外部 div 中的 div 内联显示答案

【问题标题】：Make image appear inline with a div within an outer div using css使用 css 使图像与外部 div 中的 div 内联显示
【发布时间】：2021-08-09 18:39:20
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

据我了解，您希望将带有箭头的蓝色圆圈放在输入的右侧，对吧？
是的。与输入框垂直对齐，但在其右侧。

标签： html css image

【解决方案1】：

代码有问题：

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

真实代码：

inputBox {显示：网格；网格模板列：100px 100px}

【讨论】：

我做了这个更改，但不影响布局。
好的。使用css网格；例如：inputBox {display: grid; grid-template-columns: 100px 100px}。请检查此link。
使用网格就可以了。如果你想把它放在你的答案中，我会标记它是正确的
应用于容器的网格起到了作用，直到我将图像固定到底部位置：固定；底部：10px；。现在我又回到了同样的问题。有没有办法将图像固定到底部并使用网格属性将其保持在右侧？
显然，当您将 position: 应用到某物时，它会将其带出网格，如下所示：stackoverflow.com/questions/43999732/…

【解决方案2】：

这应该会为你做的

.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>

【讨论】：