<style> .input{ resize: both; } </style> <body id="body"> <div id="left_side"> <ul> <li>修改已退备注</li> </ul> </div> <div id="right_side"> <form action="/do_change_yitui" method="post"> <!-- 定义一个多行的文本输入--> 已选择的运单号: <br> <input class="input" type="text" name="yundanhao" value="{{ids}}" >css为什么不生效
时间: 2023-09-27 13:06:11 浏览: 43
你的 CSS 选择器有问题。你使用了 `.input` 作为选择器,但是这个选择器只适用于 input 元素的 class 属性为 `input` 的情况。而在你的 HTML 代码中,input 元素的 class 属性是空的,因此样式规则并没有生效。
如果你想让所有的 input 元素都具有自动调整大小的功能,可以将选择器改为 `input[type="text"]`,如下所示:
```html
<style>
input[type="text"] {
resize: both;
}
</style>
<body id="body">
<div id="left_side">
<ul>
<li>修改已退备注</li>
</ul>
</div>
<div id="right_side">
<form action="/do_change_yitui" method="post">
已选择的运单号:<br>
<input type="text" name="yundanhao" value="{{ids}}">
</form>
</div>
</body>
```
这样,所有的 input 元素(包括多行文本输入框)都会具有自动调整大小的功能。
相关问题
<style> input { resize: both; } </style>没有效果
这个样式代码是用来设置输入框(input)的大小可调整,但是它的实际效果可能会被浏览器的安全策略限制。如果你发现这个样式代码没有生效的话,你可以尝试在样式代码前加上浏览器前缀,例如:
```
<style>
input {
-webkit-resize: both; /* for Safari/Chrome */
-moz-resize: both; /* for Firefox */
resize: both;
}
</style>
```
或者你可以尝试使用其他的 CSS 属性来自定义输入框的大小和外观,例如 width、height、border、padding、margin 等等。
{% extends 'base.html' %} {% block title %}修改已退备注{% endblock %} {% block main %} <html> <head> <style> input[type="text"] { resize: both; } </style> </head> <body id="body"> <div id="left_side"> <ul> <li>修改已退备注</li> </ul> </div> <div id="right_side"> <form action="/do_change_yitui" method="post"> <!-- 定义一个多行的文本输入--> 已选择的运单号: <br> <input type="text" name="yundanhao" value="{{ids}}" > <br> <br> <input type="text" name="beizhu" placeholder="点此输入备注"> <br> <br> <input type="submit" value="提交"> </form> </div> </body> </html> {% endblock %}为什么css不生效
根据您提供的代码,CSS样式文件中的样式可能不会生效,因为您没有将它们包含在`<style>`标记中。这是因为您使用了Django模板语言,而`<style>`标记在模板文件中被视为普通文本,因此CSS样式不会被正确解析。
要使CSS样式生效,请将它们放置在base.html文件中的`<head>`标记中,例如:
```
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<style>
input[type="text"] {
resize: both;
}
</style>
</head>
<body>
{% block main %}{% endblock %}
</body>
</html>
```
然后在您的模板文件中,使用`{% extends %}`指令扩展base.html文件,并在`{% block main %}`标记中包含您的页面内容。这样,您的CSS样式将被正确加载并应用于页面。