Question

所以我有这个网站，一切都运行得很好，除了我的链接显示在我的段落文本下面的页脚。这有点奇怪。如果有人能帮助我解决这个问题，我会很高兴。

小提琴（这里是完整的HTML）：https://jsfiddle.net/tamasaurusrex/vto650sk/#&togetherjs=vhoV1ows84

HTML：

<footer>
        <div class="col-6">
            <img src="img/footer_test.png">
            <p>
                Copyright ©2016 Nito, Inc. New York, NY - <a href="privacy.html">Privacy Policy</a> - <a href="press_02092016.html">Press</a>
            </p>
        </div>
    </footer>

CSS：

    *{
    font-family: 'Lato', sans-serif;
    text-align: center;
    vertical-align: middle;
    color: #3e3e3e;
    font-weight: lighter;
}

b{
    font-weight: bold;
}

a b{
    font-weight: bold;
}
a{
    text-decoration: none;
}
body{
    background: #91b0cd;
    background: -webkit-linear-gradient(#91b0cd, white); /*gradient for safari*/
    background: -o-linear-gradient(#91b0cd, white); /*gradient for opera*/
    background: -moz-linear-gradient(#91b0cd, white); /*gradient for firefox*/
    background: linear-gradient(#91b0cd, white); 
    align: center;

}

header{
    padding: 30px 0 0 0;
}

h1{
    font-size: 24px;
    color: white;
}

h2{
  font-size: 26px;
}

h3{
    margin-top: 0;
    color: #ffffff;
}

iframe{
    max-width:100%;
}

ul {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav li{
    display: inline;
}

img{
    max-width: 100%;
    height: auto;
}

footer{
    font-size: 80%;
    padding-top: 5px;
    /*text-align: center;
    /*padding: 180px 0 0 0;
    /*background-image: url("img/footer_test.png");*/
    max-width: 100%;
    background-repeat: no-repeat;
    background-position:center bottom;
    background-size: 100%;
}

footer p{
    /*background-image: url("img/footer_test.png");*/
    color: black;
    background-color: white;
    padding-top: 5px;
    /*opacity: 0.75;*/
    font-weight: bold;
    text-decoration: none;
}

footer a{
    text-decoration: none;
    font-weight: bold;
}

.floatleft {
    float:left;
}
.floatright {
    float:right;
}

.featuredApps{
    margin-top: 0px;
}

.nitofam img{
    margin: 10px;
    padding: 10px;
}
.release{
    text-align: left;
}
#demo img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*#nav{
    align: center;
    repeat: no-repeat;
}*/

#logo img{
    width: 15%;
    height: 15%;
}



.grid-container{
    width: 100%; 
    max-width: 1900px;      
}

/*-- our cleafix hack -- */ 
.row:before, 
.row:after {
    content:"";
    display: table ;
    clear:both;
}

[class*='col-'] {
    float: left; 
    min-height: 1px; 
    width: 16.66%; 
    /*-- our gutter -- */
    padding: 12px; 
    /*background-color: #FFDCDC;*/
}


.col-1{ width: 16.66%; }
.col-1a{width: 20%;}
.col-1b{width: 25%;}
.col-2{ width: 33.33%; }
.col-3{ width: 50%;    }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%; padding: 0;}
.col-6b{ width: 70%; margin-left: 15%; margin-right: 15%;}

/*.outline, .outline *{
    outline: 1px solid #F6A1A1; 
}*/

/*-- some extra column content styling --*/
[class*='col-'] > p {
    /*background-color: #FFC2C2; */
    padding: 0;
    margin: 0;
    text-align: center;
    vertical-align: center;
}

@media screen and (max-width: 600px) {
    nav { 
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: center;
        position: relative;
    }
    .floatleft {
    float:none;
    }
    .floatright {
    float:none;
}

}

Answer 1

看起来像* {vertical-align：middle;导致它。也许将这种风格转移到你需要它的特定元素而不是应用于所有东西？

链接与段落文本错位

1 个答案: