Question

我以前做过基本的网页设计我记得每当我用div制作一个盒子并在里面放一段文字时，段落的背景就会透明，所以你会看到盒子背景。 / p>

现在不会发生这种情况，每次我把一个段落，h1，h2 ......放在一个div上，它就像一个带有背景颜色的盒子而不是一个盒子

我的网页html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GO!</title>
    <link rel="stylesheet" href="styles/main.css" type="text/css">
    <link rel="stylesheet" href="styles/pages.css" type="text/css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/index.html">X</a>
                    <ul>
                        <li><a href="/register.html">REGISTRARSE</a></li>
                        <li><a href="/recover.html">RECUPERAR CONTRASEÑA</a></li>
                    </ul>
                </li>
                <li><a href="">DESCARGAR</a>
                    <ul>
                        <li><a href="/descargas/android.html">ANDROID</a></li>
                        <li><a href="/descargas/ios.html">iOS</a></li>
                    </ul>
                </li>
                <li><a href="">AYUDA</a>
                    <ul>
                        <li><a href="/ayuda/faqs.html">FAQ'S</a></li>
                        <li><a href="/ayuda/ticket.html">ENVIA UN TICKET</a></li>
                        <li><a href="/ayuda/tutorial.html">COMO JUGAR</a></li>
                    </ul>
                </li>
                <li><a href="">MAPAS</a>
                    <ul>
                        <li><a href="/mapas/madrid.html">MADRID</a></li>
                        <li><a href="/mapas/barcelona.html">BARCELONA</a></li>
                        <li><a href="/mapas/sevilla.html">SEVILLA</a></li>
                        <li><a href="/mapas/valencia.html">VALENCIA</a></li>
                        <li><a href="/mapas/mas.html">MAS</a></li>
                    </ul>
                </li>
                <li><a href="">NOSOTROS</a>
                    <ul>
                        <li><a href="/nosotros/equipo.html">EQUIPO</a></li>
                        <li><a href="/nosotros/politica.html">POLITICA DE EMPRESA</a></li>
                        <li><a href="/nosotros/contactanos.html">CONTACTANOS</a></li>
                    </ul>
                </li>
                <li><a href="">PARA EMPRESAS</a>
                    <ul>
                        <li><a href="/empresas/que.html">¿QUE ES X?</a></li>
                        <li><a href="/empresas/unete.html">UNETE A LA AVENTURA</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Registrate ahora</h1>

        <div class="registerbox">
            <p>Usuario: </p>
            <input type="text">
            <p>Contraseña: </p>
            <input type="password">
            <p>Repite la contraseña: </p>
            <input type="password">
            <p>Email: </p>
            <input type="text">
            <p>Repite el email: </p>
            <input type="text">
        </div>
    </main>
    <footer>
        <p>GO! Copyright 2018 All rights reserved.</p>
    </footer>
</body>
</html>

我的第一个css：

@import url('https://fonts.googleapis.com/css?family=Gamja+Flower|Gugi|Ubuntu');


*{
    margin: 0;
    padding: 0;
}

html {
  height: 100%;
}


body {
    background: linear-gradient(#45b1c7 30%, #7be5fa);
}
/* MENUS */

header {
    width:100%;
    position: fixed;
    top: 0;
}

/* MENU PRINCIPAL */

header nav ul {
    list-style: none;
    text-align: center;
    background: #F6F6F6;
    border-bottom: solid 2px #C4C4C4;
    z-index: 0;
}

header nav ul li {
    display: inline-block;
}

header nav ul li a {
    display: block;
    padding: 35px 25px;
    color: #000;
    text-decoration: none;
    background: #F6F6F6;
    font-family: 'Gugi', sans-serif;
    font-size: 20px;
}

header nav ul li a:hover {
    background: #E8E8E8;
}

/* SUBMENUS GENERAL */

header nav ul li ul {
    background: #F2ED54;
    width: 100%;
    top: 33px;
    left: 0;
    position: absolute;
    z-index: -1;
    transition: all 0.5s ease;
    border-style: none;
}

header nav ul li ul li a {
    background: #F2ED54;
    padding: 20px 25px;
    font-size: 17px;
}

header nav ul li ul li a:hover {
    background: #DCD84D;
    padding: 20px 25px;
    font-size: 17px;
}

header nav ul li:hover > ul{
    top: 95px;
}

/* FOOTER */

footer {

    width:100%;
    position: fixed;
    bottom: 0;
}

footer p {
    background: #252525;
    color: #fff;
    text-align: center;
    font-family: 'Ubuntu';
    padding: 20px;
}

我的第二个css：

/* CONTENIDOS */

main {
    margin-top: 95px;
    text-align: center;
    padding-top: 60px;
}

h1 {
    font-family: 'Gugi';
    font-size: 40px;
    color: #fff;
    text-shadow: 3px 3px rgba(0,0,0,0.15);
}

h2 {
    margin-top: 20px;
    font-family: 'Gugi';
    font-size: 20px;
    color: #fff;
    text-shadow: 3px 3px rgba(0,0,0,0.15);
    text-transform: uppercase;
}

.registerbox {
    margin: auto;
    width: 50%;
    background: rgba(255,255,255,.5);
}

.registerbox p {

}

问题是，当.registerbox具有背景颜色时，它不会显示，有时如果框显示颜色，则内部的元素周围有框，具有网络的背景颜色但不是格。

我希望它清楚，难以解释，我会尝试让图片中发生的事情发生。

哦，你也可以看到，虽然我已经将.registerbox宽度设置为50％，但它仍然是100％，为什么会发生这种情况？

提前致谢。

代码在这里工作：https://codepen.io/OscarArranz/pen/yjmrLo

Answer 1

我认为在registerbox这个词后面有一个隐藏的字符（带有该字的第一个类）。删除空格然后重新添加。

框中的文本不共享框背景

1 个答案: