Question

我正在尝试将display: initial添加到我的<li>容器中。但是当我这样做时，它也会让<form>改变它的位置。

我附上了我的编码，让你看看并理解我在说什么。

如果有人能向我解释发生了什么，为什么以及如何解决这个问题，我将不胜感激。

＆＃13;

/* Contact Section */
.section4{
    background: whitesmoke;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-wrap{
    min-width: 50vw;
}
.form-text{
    margin-top: 0;
    margin-bottom: 5vh;
    font-family: Oswald;
    font-size: 8vh;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}
.contact{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}
.contact-full{
    grid-column: 1/3;
}
.contact, input, textarea, .button{
    padding: 1.5vh;
    margin: 0;
}
.button{
    font-family: Oswald;
    font-weight: 700;
    text-transform: uppercase;
    position: static;
    font-size: 2.5vh;
    background: transparent;
    border: 10px solid transparent;
    border-image: #c71d6f;
    border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
    border-image-slice: 1;
    grid-column: 2;
}
/* End Contact Form */

/* Footer */
footer{
    background: #111111;
    min-height: 10vh;
    display:flex;
    align-items: center;
    justify-content: center;
}
footer > div {
  flex:1;
}
.copyright p{
    font-family: Oswald;
    font-weight: 400;
    color: whitesmoke;
}
.social-media{
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-media-icons{
    padding: 0 0.375vw;
}
.contact{
    font-family: Oswald;
    font-weight: 500;
    text-align: right;
    color: whitesmoke;
    list-style-type: none;
    padding: 0;
}
.contact-list{
    display: block;
}
a{
    text-decoration: none;
    color: whitesmoke;
}
/* End Footer */

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Oswald:400,500,600,700" rel="stylesheet">
    </head>
    <body>
        <div class="section4">
            <form>
                <h2 class="form-text">Title</h2>
                <div class="contact-wrap">
                    <div class="contact">
                        <input type="name" id="name" placeholder="Name" required>
                        <input type="name" id="company" placeholder="Company">
                        <input type="email" id="email" placeholder="Email" required>
                        <input type="tel" id="telephone" placeholder="Contact">
                        <textarea class="contact-full" name="message" rows="10" required></textarea>
                        <button class="button">Send</button>
                    </div>
                </div>
            </form>
        </div>
    </body>
    <footer>
            <div class="copyright">
                <p>&copy; 2018</p>
            </div>
            <div class="brands">
                <div class="social-media">
                        <a href="http://www.facebook.com/" target="_blank">
                            <img class="social-media-icons" src="files/facebook.png"></a>
                        <a href="http://www.instagram.com/" target="_blank">
                            <img class="social-media-icons" src="files/instagram.png"></a>
                        <a href="http://www.twitter.com/" target="_blank">
                            <img class="social-media-icons" src="files/twitter.png"></a>
                </div>
            </div>
            <div class="contact">
                <li class="contact-list">
                    <a href="tel:+00">00</a>
                </li>
                <li class="contact-list">
                    <a href="mailto:hi@hi.com">hi@hi.com</a>
                </li>
            </div>
    </footer>
</html>

＆＃13;

Answer 1

您需要做的就是将您的李包裹在 ul 中。所以：

        <div class="contact">
            <ul>
                <li class="contact-list">
                    <a href="tel:+00">00</a>
                </li>
                <li class="contact-list">
                    <a href="mailto:hi@hi.com">hi@hi.com</a>
                </li>
            </ul>
        </div>

或

            <ul class="contact">
                <li class="contact-list">
                    <a href="tel:+00">00</a>
                </li>
                <li class="contact-list">
                    <a href="mailto:hi@hi.com">hi@hi.com</a>
                </li>
            </ul>

堆叠<li>而不影响<form>

1 个答案: