1

在引导程序中，我们可以使用以下代码预先输入一个输入：

<div class="input-prepend">
  <span class="add-on">@</span>
  <input type="text">
</div>

我想在 jQuery Mobile 中实现完全相同的功能，但不使用引导程序。我可以看到bootstrap的相关CSS代码如下：

.input-prepend {
    display: inline-block;
    font-size: 0;
    margin-bottom: 10px;
    vertical-align: middle;
    white-space: nowrap;
}
.input-prepend .add-on {
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    height: 20px;
    line-height: 20px;
    min-width: 16px;
    padding: 4px 5px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: auto;
}

将这些添加到我的自定义 CSS 后，我仍然无法弄清楚缺少什么。但肯定缺少一些东西。有人可以指导我。这是小提琴的例子：http: //jsfiddle.net/LittleLebowski/Mgq9W/

4

2 回答 2

1

保持 css 的其余部分相同，但将其添加到 .input-prepend .add-on 规则。你也可以使用vertical-align:top。我使用您的小提琴链接对其进行了测试。

.input-prepend .add-on {
    vertical-align: bottom;
}
于 2013-05-06T23:27:43.163 回答
0

您也可以尝试添加..

.input-prepend input {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}
于 2013-05-06T13:37:05.427 回答