表格尺寸最小

问题描述 投票:1回答:2

标题可能有点模糊,但它是我问题的最佳解释。我在我的CSS代码中弄乱了一些东西,目前我的表格保持一个奇怪的大小,宽度大约接近0。

我添加了一张图片来展示它的样子:

This is the problem

我尝试将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运行它时,它看起来应该看起来像。这是否意味着这部分代码没有任何问题?因为在那种情况下我将不得不去看其他部分,但我不确定。

css html5 forms
2个回答
5
投票

代码似乎绝对正确。检查继承的样式。您可以在Chrome开发工具中轻松找到它。在CSS toolbar中,您可以找到影响每个特定元素的选择器和属性的完整列表。

从图片看,它看起来像是红色轮廓通过的地方。尝试找出这个选择器(如果它没有调试)。


0
投票

由于某些原因,我的CSS文件的更改不会显示在我的电脑上。我去了手机,应用了更改。改变宽度工作,但不是在我的电脑上。很奇怪。这可能是我学校服务器的一个缺点。

无论如何,代码实际上只是没有直接显示在我的电脑上。

如果其他人遇到此问题,您只需使用:Ctrl + Shift + R清除缓存,然后添加.css文件中的编辑。

© www.soinside.com 2019 - 2024. All rights reserved.