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

阿敏

嗨,我有不同的风格,因为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>

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

埃德加斯·艾瓦斯(Edgars Aivars)

像这样?
https://jsfiddle.net/mL1o0d5m/1/
这是实现此目标的众多可能性之一。
.form > label{ text-align: right; float:right; width:40px; margin-top:10px; }
在.icon:before和.addon:before中添加了一些CSS
在小提琴中查看

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在一行中显示标签,输入和图像?

来自分类Dev

如何在一行中添加到标签和输入(HTML)

来自分类Dev

如何在同一行上对齐div输入标签和按钮

来自分类Dev

如何在 HTML 的同一行上输入和标签?

来自分类Dev

如何在嵌入在div块中的输入标签之后的一行中显示按钮?

来自分类Dev

如何在python中从一行设置多个输入的默认值

来自分类Dev

如何在python中从一行设置多个输入的默认值

来自分类Dev

如何在LinearLayout内的一行中设置ImageView和textView

来自分类Dev

如何在Haskell的一行中输入多个值

来自分类Dev

如何在Haskell的一行中输入多个值

来自分类Dev

如何在for中的一行内输入if elsif

来自分类Dev

如何在C的一行中设置多个位?

来自分类Dev

如何在一行副本中设置例外

来自分类Dev

如何将标签和输入对齐到一行?

来自分类Dev

如何将标签和输入对齐到一行?

来自分类Dev

按钮与输入和标签在同一行

来自分类Dev

使输入和标签元素出现在列中的同一行上

来自分类Dev

使用Bootstrap在一行中输入框和标签

来自分类Dev

如何在PHP中跳过文件的第一行和最后一行

来自分类Dev

如何在python列表中打印上一行和下一行

来自分类Dev

如何在PHP中跳过文件的第一行和最后一行

来自分类Dev

在一行中对齐hr标签和img标签

来自分类Dev

如何在Pandas DataFrame中的一行中传递XML中不同标签的元素?

来自分类Dev

熊猫:如何设置标签列的最后一行的值?

来自分类Dev

Matplotlib:在一行中设置xy标签

来自分类Dev

为什么输入标签要在下一行中输入?我要在同一行中输入

来自分类Dev

如何在Bootstrap 3.4的同一行上创建输入和按钮?

来自分类Dev

如何在一行中使用转换、输入和拆分条件

来自分类Dev

如何在javascript中为变量设置一行设置器?

Related 相关文章

  1. 1

    如何在一行中显示标签,输入和图像?

  2. 2

    如何在一行中添加到标签和输入(HTML)

  3. 3

    如何在同一行上对齐div输入标签和按钮

  4. 4

    如何在 HTML 的同一行上输入和标签?

  5. 5

    如何在嵌入在div块中的输入标签之后的一行中显示按钮?

  6. 6

    如何在python中从一行设置多个输入的默认值

  7. 7

    如何在python中从一行设置多个输入的默认值

  8. 8

    如何在LinearLayout内的一行中设置ImageView和textView

  9. 9

    如何在Haskell的一行中输入多个值

  10. 10

    如何在Haskell的一行中输入多个值

  11. 11

    如何在for中的一行内输入if elsif

  12. 12

    如何在C的一行中设置多个位?

  13. 13

    如何在一行副本中设置例外

  14. 14

    如何将标签和输入对齐到一行?

  15. 15

    如何将标签和输入对齐到一行?

  16. 16

    按钮与输入和标签在同一行

  17. 17

    使输入和标签元素出现在列中的同一行上

  18. 18

    使用Bootstrap在一行中输入框和标签

  19. 19

    如何在PHP中跳过文件的第一行和最后一行

  20. 20

    如何在python列表中打印上一行和下一行

  21. 21

    如何在PHP中跳过文件的第一行和最后一行

  22. 22

    在一行中对齐hr标签和img标签

  23. 23

    如何在Pandas DataFrame中的一行中传递XML中不同标签的元素?

  24. 24

    熊猫:如何设置标签列的最后一行的值?

  25. 25

    Matplotlib:在一行中设置xy标签

  26. 26

    为什么输入标签要在下一行中输入?我要在同一行中输入

  27. 27

    如何在Bootstrap 3.4的同一行上创建输入和按钮?

  28. 28

    如何在一行中使用转换、输入和拆分条件

  29. 29

    如何在javascript中为变量设置一行设置器?

热门标签

归档