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

【问题标题】：Stack <li> without effecting <form>堆叠 <li> 而不影响 <form>
【发布时间】：2018-06-22 21:31:31
【问题描述】：

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

我已附上我的代码供您查看并了解我在说什么。

如果有人可以向我解释发生了什么，为什么以及如何解决它，我将不胜感激。

/* 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 */

<!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>

【问题讨论】：

您在页脚和表单中使用相同的类contact。所以我猜你正在改变它并且你搞砸了表格，尝试使用另一个类
天哪！这么业余的举动哈哈。谢谢指出
没问题 ;) 我看到你除了 flex 之外还使用了 grid
还把你<li> 放在<ul> 里面，而不是<div>。 <ul> 表示无序列表，而 <li> 是列表项。
是的哈哈谢谢@TemaniAfif

标签： html css forms footer display

【解决方案1】：

您需要做的就是将您的 li 包裹在 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>

【讨论】：