2 个不同元素的相同外观答案

【问题标题】：Same look for 2 different elements2 个不同元素的相同外观
【发布时间】：2012-05-23 20:50:53
【问题描述】：

我一直在寻找 jQ 插件，它提供与 StackOverflow 标记相同的结果。使用 Tokeninput 找到了一个。

现在，看看这个截图：

铬

火狐

如您所见，输入文本元素在浏览器上看起来有些不同。

我想要得到的是，ul 元素的外观与带有 CSS 的 input text 完全相同（我的意思是，宽度、边框、插入阴影......等。尝试但无法弄清楚我是什么丢失）或插件修改以在输入文本框中获得相同的结果而不是 ul li 结构（如 Stackoverflow 标签。我认为这有点难以实现。）有什么建议吗？提前致谢

【问题讨论】：

如果您正在谈论看起来不同的文本，那么您无能为力。至于输入元素，给它一个边框，它们看起来都非常相似。
@KevinB 我需要宽度与 Ul 相同。它必须像 UL 一样填充剩余宽度
使用调试控制台检查元素并复制应用的样式，然后通过 css 将它们应用到目标输入。
@KevinB 试过了。 Ul 是动态变化的。试试你的浏览器，你会看到
你所要做的就是给它一个边框、一个宽度和适当的填充。试一试。

标签： javascript jquery css jquery-tokeninput

【解决方案1】：

对于两个输入，添加边框：1px solid #ddd;还有背景：白色；

这将强制输入具有相同的效果

【讨论】：

我需要宽度与 Ul 相同。它必须像 UL 一样填充剩余宽度。
如果浏览器很小则不起作用，因为您还需要添加与上层无序列表相同的最小宽度（将其添加到 mail_credentials）

【解决方案2】：

如果它只是您担心的输入字段，请尝试向 mail_credentials 的 CSS 添加宽度、高度和边框属性，如下所示：

.mail_credentials{
    padding: 5px 5px 5px;
    margin: 0 15px 10px 20px;
    border: 1px solid #ccc;
    width: 150px;
    height: 14px;
}

【讨论】：

我需要宽度与 Ul 相同。它必须像 UL 一样填充剩余宽度