【问题标题】:Align input text icon to the right将输入文本图标右对齐
【发布时间】:2013-08-15 13:19:50
【问题描述】:

我正在尝试在字段输入的末尾添加一个图标,无论 INPUT 的宽度如何,该图标始终保持在右侧,与边缘有一个小的偏移。我试过这个:

<div class='span6'>
    <i class="icon-calendar icon-large"></i>
     <input type="text" class="datepicker span12 dats" id="dpd2" placeholder="Choose Depart Date">
</div>

.icon-calendar {      
    display: inline-block;
    position:absolute;
    z-index:3;
    line-height: 42px;
    text-indent: 106px;
}

并且不起作用。请帮帮我。使用引导程序和字体真棒

全部代码here

【问题讨论】:

  • 定义“不起作用”。 .span6 上的 css 是什么?应该是relative。另外,你说的是绝对位置,但不要用顶部、右侧、左侧或底部来指定位置。

标签: css twitter-bootstrap input icons font-awesome


【解决方案1】:

此代码将起作用。

 .span6 { position: relative; }

.icon-calendar { right: 5px; }

【讨论】:

  • 使用开发者工具为我工作。你确定你做对了吗?
  • 查看我的问题 - 我将您的更改上传到服务器
  • 您仍应保留所有旧样式。我看到你删除了 position: absolute;关于图标样式。
  • 太棒了,很高兴我能帮上忙。
猜你喜欢
  • 1970-01-01
  • 2012-10-13
  • 2021-07-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-15
  • 2014-06-07
  • 1970-01-01
相关资源
最近更新 更多