Question

我正在尝试为搜索功能创建自定义文本框。但是，浏览器忽略了css中的宽度设置。我甚至完全取出了代码并将其放在自己的html文件中，以防它被其他东西限制。我已经使用了Google Chrome v38和IE11

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    
        <link href="Content/Site.css" rel="stylesheet" />
    </head>
    <body>
        <input type="text" class="bigsearch">
    </body>
    </html>

使用css

     .bigsearch {
                top: 20px;
                left: 20px;
                padding: 5px;
                border-radius: 10px;
                box-shadow: 0 0 12px;
                width: 700px;
                font-size: 22px;
            }

但是在浏览器中，文本框的渲染宽度大约为300px，无论我在css中将其设置为什么。

如果我将代码更改为

         <body>
                <input type="text" style="width: 700px" class="bigsearch">
            </body

我得到了相同的结果。但是，如果我把所有的css放在html页面中，删除样式表文件的链接，

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style>
        .bigsearch {
            top: 20px;
            left: 20px;
            padding: 5px;
            border-radius: 10px;
            box-shadow: 0 0 12px;
            width: 700px;
            font-size: 22px;
        }
    </style>
</head>
<body>
    <input type="text" class="bigsearch">
</body>
</html>

它运作正常。是什么给出了什么？

编辑：我应该补充一点，其余的样式都应用于文本框 - 阴影，圆角等。

Answer 1

由于您的样式表没有正确链接，因此无效

如果您的文件是index.html并且位于：

C:/User/Documents/index.html

，您的样式表在

中

C:/User/Documents/Content/style.css

然后以下工作正常

<link href="Content/style.css" rel="stylesheet" />

为什么文本框不会渲染到设定宽度？

1 个答案: