Question

编辑：如果我将输入宽度设置为像素的输入，它将改变大小，但如果我尝试将其设置为百分比，则它不会改变。我在同一个div中有其他输入可以改变百分比的大小，但不会改变类型typeahead和tt-query

我找到了这个脚本，并且我已经开始工作了。问题是，当我尝试使其响应时，我无法更改输入框或下拉列表的宽度。

CSS

        <script>
    $(document).ready(function(){
    $('input.typeahead').typeahead({
        name: 'typeahead',
        remote:'../searchchem.php?key=%QUERY',
        limit : 10
    });
});
    </script>
        <style type="text/css">
            .bs-example{
            font-family: sans-serif;
            position: relative;
            margin: 5px;
            }
            .typeahead, .tt-query, .tt-hint {
            border: 2px solid #CCCCCC;
            border-radius: 8px;
            font-size: 12px;
            line-height: 30px;
            padding: 8px 20px;
            }
            .typeahead {
            background-color: #FFFFFF;
            }
            .typeahead:focus {
            border: 2px solid #0097CF;
            }
            .tt-query {
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
            }
            .tt-hint {
            color: #999999;
            }
            .tt-dropdown-menu {
            background-color: #FFFFFF;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            margin-top: 12px;
            padding: 8px 0;
            }
            .tt-suggestion {
            font-size: 12px;
            line-height: 24px;
            padding: 3px 20px;
            }
            .tt-suggestion.tt-is-under-cursor {
            background-color: #0097CF;
            color: #FFFFFF;
            }
            .tt-suggestion p {
            margin: 0;
            }

</style>

HTML

<form action="search.php" method="post">
                                            <input type="text" name="typeahead" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
                                            <input type="submit" value="Search">
                                        </form>

Jquery

https://jsfiddle.net/fet3vuc0/

我提前为jquery在一条线路上道歉，我不确定如何改变它。

Answer 1

我认为你看到的是浏览器给出的元素的初始宽度。如果您将表单裸露，只有文本输入和按钮，则文本输入仍将具有初始宽度，在浏览器中略有不同。但是，如果更改浏览器窗口的宽度，则不会调整该宽度。

通常情况下，您可以使用Media Queries设置样式。这允许您根据浏览器窗口的大小给出不同的宽度。

请注意，IE8及更低版本的IE不支持媒体查询。

<强>更新

随着您对问题的更新：

尝试在文字输入上使用box-sizing。

删除宽度样式，仍然没有变化。 jQuery的？

1 个答案: