chatアプリの placeholder、アイコン、送信ボタンを 横並びにしたい
あの手この手で display: flex; を試しましたが、出来ませんでした、、、
現状
目標
コードは下記の通りです
form.haml
.form=form_for[@group,@message]do|f|=f.text_field:content,class: 'form__message',placeholder: 'type a message'.form__file=f.label:image,class: 'form__mask__image'do=icon('fas','image',class: 'icon')=f.file_field:image,class: 'hidden'=f.submit'Send',class: 'form__submit'form.scss
.form{display:flex;margin-left:300px;padding-left:40px;margin-bottom:0auto;align-items:center;background-color:#ddd;width:calc(100vw-336px);height:90px;text-align:center;&__message{width:calc(100vw-495px);height:50px;border:none;padding:10px;font-size:16px;color:#434A54;outline:none;}&__submit{width:100px;height:50px;color:$whitecolor;background-color:#38AEF0;margin:0px40px0px15px;}.form__mask__image{input{display:none;}.icon{font-size:23px;}}}初めての質問で、至らない点もありますが
どうかご教授ください
よろしくお願いいたします。
