浮動在CSS中的權利屬性不起作用

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; 
    }

所以，請幫我解決這個錯誤..

謝謝... \

。

來源

2016-11-03 IamNOOB

浮動權沒有做任何事情，如果你有固定的位置...只是改變左邊的權利 – DaniP

Lmfaooo @connexo我很小心 – IamNOOB

Ohk讓我試試@DaniP – IamNOOB

In .send-btn remove position：fixed;

來源

2016-11-03 14:28:49

它隱藏了xD – IamNOOB

我改變了

left: 7px;

到

left: 90%

，它解決了這一問題

來源

2016-11-03 14:53:40 IamNOOB

使用CSS Flexbox的。創建一個父容器，其中包含輸入&按鈕 - .input-container並將display: flex;屬性應用於（以垂直排列中心的項目）。

並將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>

希望這有助於！

來源

2016-11-04 19:06:27

浮動在CSS中的權利屬性不起作用

回答

相關問題