css - 表格尺寸最小
问题描述
标题可能有点模糊,但它是对我的问题的最佳解释。我在我的 CSS 代码中搞砸了一些东西,目前我的表单保持在一个奇怪的大小,宽度接近 0。
我添加了一张图片来展示它的样子:
我尝试添加width: 100px;
到我的 CSS 文件,但它没有做任何事情。这是CSS和HTML代码:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
background: rgba(144, 144, 144, 0.075);
border-radius: 0;
border: none;
border: solid 1px #dbdbdb;
color: inherit;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
background-color: grey;
width: 100px;
}
input[type="text"],
input[type="password"],
input[type="email"],
select {
height: 2.75em;
width: 100px;
}
textarea {
padding: 0.75em 1em;
margin-bottom: 20px;
resize: vertical;
width: 100px;
height: 100px;
}
<?php
if(isset($_SESSION["username"]) and $_SESSION["username"] == "No User")
{
echo"<form action='index.php' method='post'>
<input type= 'text' name='gebruikersid' placeholder='Gebruikersnaam' size='20' maxlength='20' required>
<input type= 'email' name='mail' placeholder='Email Addres' size='20' maxlength='50' required>
<input type= 'password' name='wachtwoord' placeholder='Wachtwoord' size='20' maxlength='30' required>
<input type= 'password' name='wachtwoordcheck' placeholder='Wachtwoord bevestigen' size='20' maxlength='30' required>
<input type= 'text' name='voornaam' placeholder='Voornaam' size='20' maxlength='30' required>
<input type= 'text' name='achternaam' placeholder='Achternaam' size='20' maxlength='30' required>
<select name='sekse'>
<option value='Man'>Man</option>
<option value='Vrouw'>Vrouw</option>
</select>
<input type='submit' name='reg' value='Registreer'>
</form>";
}
?>
出于某种原因,当我从 Stack Overflow 运行它时,它看起来应该是这样的。这是否意味着这部分代码没有问题?因为在那种情况下,我将不得不去看看其他部分,但我不确定。
解决方案
该代码似乎是绝对正确的。检查继承的样式。您可以在 Chrome 开发工具中轻松找到它。在CSS 工具栏中,您可以找到影响每个特定元素的选择器和属性的完整列表。
从图片上看,好像某个地方通过了红色轮廓。尝试找出这个选择器(如果它没有调试)。
推荐阅读
- cmake - 无法在 Debug / X64 的 Visual Studio 中调试 googletests
- python - pandas 中的“复制”参数是否按预期工作?
- python - 尝试连接到 API 并打开 MySQL 端口以便它可以工作,但终端只是挂起
- javascript - 使用javascript从表中删除列
- java - 如何在 Quartz Scheduler 中使用 JDBC 作业存储
- reactjs - 使用 react-window 防止 DOM 元素在虚拟化树组件中重新渲染
- php - Codeigniter 中的会话有什么问题?
- php - 使用 PHP 在 mysql 表中添加数据时出错
- oracle12c - 将行转置到转置列基于另一列发生变化的列
- javascript - Vuejs如何创建一个新数组以传递给图形