Question

我正在使用chrome-extension，它基本上会将 jquery自动完成添加到Facebook聊天框。

现在，我想让自动填充的建议列表菜单水平。

所以，我尝试通过在我设计的本地html文件上对其进行测试来更改jquery-ui.css，并且它只包含textarea。

所以，我在这个CSS文件中发现如果我进行了更改：

原始

...
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0; /* support: IE7 */
    font-weight: normal;
}

更改：

...
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: inline;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0; /* support: IE7 */
    font-weight: normal;
}

问题：

display:block到display:inline，我得到一个水平列表。这在本地文件中正常工作。

已经尝试!important，但它不起作用。

但是，当我在https://www.facebook.com/上测试时，它不起作用。

注意：

另外我想补充一点，如果我尝试通过将font-weight:normal更改为font-weight:bold来使列表菜单项变粗，那么这在本地和脸谱中都适用。

那么，如何管理呢？另外，如果需要代码的任何部分，请在下面评论，如果你想查看它（我不想让这个问题不必要地长），那么我会尽快包含那部分代码。

我对SO很新，所以如果您希望我以任何方式编辑问题，请发表评论。

P.S。：我正在使用谷歌浏览器和Opera网络浏览器来测试此扩展程序。

Answer 1

为此找到了解决方案。

在此添加，以便它可以帮助其他人，他们想要一个水平的自动完成菜单。

在facebook html页面顶部添加了style标记：

var style = $(document).find('body');
$(style).prepend("<style>.ui-menu-item{display:inline;}</style>");

你还需要在jquery-ui CSS文件中使用相同的文件。

我不知道为什么jquery-ui CSS文件中的更改仅在此处失败，但添加此类标记已解决并使自动完成列表处于水平状态。

感谢大家的帮助。

为什么CSS与本地和远程网站的工作方式不同？

1 个答案: