Question

嗨我有不同的风格，因为betwin labale和输入设置图标。请锁定https://jsfiddle.net/mL1o0d5m/

css代码：

body{
    font-family: tahoma;
    font-size:14px;
    background-color:#f1f1f1;
    color:#999;
    direction:rtl;
}

.form{
    font-size:14px;
    width:100%;
}

.form label{
    text-align: right;
    clear: both;
    float:right;
}

.form input.inputs{
    font-size:14px;
    color:#999;
    display:block;
    border:1px solid #ccc;
    border-right:none;
    background-color:#fff;
    width:80%;
    margin-bottom:20px;
    padding:10px;
    padding-right:30px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-shadow:none;
    -webkit-appearance: none;
}

.addon{
    position:relative;
    font-size:0;
}

.addon:before{
    display:block;
    content:"";
    width:3px;
    height:100%;
    background-color:#3399cc;
    position:absolute;
}

.icon:before{
    font-size:14px;
    color:#bbb;
    position:absolute;
    top:12px;
    right:12px;
}

HTML：

<form class="form">
<label>Name</label>
    <div class="addon">
        <i class="icon fa fa-user"></i>
        <input class="inputs" name="name" type="text" placeholder="Name" />
    </div>



</form>

我想在同一行设置标签和输入。标签应该在右边，输入和图标必须在左边。谢谢。

Answer 1

像这样？
https://jsfiddle.net/mL1o0d5m/1/这是实现这一目标的众多可能之一。添加了一些CSS

.form > label{
      text-align: right;
      float:right;
      width:40px;
      margin-top:10px;
 }

以及.icon：之前和.addon：之前是参见小提琴

如何在一行中设置标签和输入？

1 个答案: