Question

我想将发送按钮对齐。但它不起作用。

的CSS：

 input.textarea {
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width: 100%;
        height: 50px;
        z-index: 99;
        background: #fafafa;
        border: none;
        outline: none;
        padding-left: 55px;
        padding-right: 55px;
        color: #666;
        font-weight: 400;
    }
    .send-btn {
      float: right!important;
        position: fixed;
        text-align: right;
        bottom: 8px;
        left: 7px;
        width: 34px;
        height: 34px;
        background-image: url(https://cdn2.iconfinder.com/data/icons/dark-action-bar-2/96/send-512.png);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 100;
        cursor: pointer;
    }

所以请帮我解决这个错误。

谢谢...... \

Answer 1

在 .send-btn 中移除位置：已固定;

Answer 2

我改变了

left: 7px;

到

left: 90%

它解决了问题

Answer 3

使用CSS Flexbox。创建一个容纳输入和输入的父容器。按钮 - .input-container并将display: flex;属性应用于align-items: center;（以垂直方向排列中心的项目）。

并将input.textarea和.send-btn作为其项目（子）。

请查看下面的代码。

/* New container with flex properties */
.input-container {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 50px;
  z-index: 99;
  display: flex; /* Flex Property */
  align-items: center; /* Alignining items center vertically */
  background: #fafafa; /* Applying BG to container instead of textfield */
}

/* Modifications to input */
input.textarea {
  width: 100%;
  height: 50px;
  padding: 0 25px;
  background: transparent;
  
  /* Old styles */
  z-index: 99; border: none; outline: none; color: #666; font-weight: 400;
}

.send-btn {
  margin-right: 15px;
  width: 40px;
  height: 34px;
  
  /* Old styles */
  background-image: url(https://cdn2.iconfinder.com/data/icons/dark-action-bar-2/96/send-512.png); background-repeat: no-repeat; background-size: cover; z-index: 100; cursor: pointer;
}

<div class="input-container">
  <input type="text" class="textarea" value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..." />
  <button class="send-btn"></button>
</div>

希望这有帮助！

CSS中的Float Right属性不起作用

3 个答案: