Question

您可以在页面底部看到有问题的按钮（它只是一个看起来像按钮的链接）。是什么导致它向上延伸？我以前把它看作是我想要的样子，但在某些时候某些东西导致它变得混乱。

@charset "utf-8";
/* CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End CSS Reset */






@charset "utf-8";
/* General Styles */

body {
    max-width: 100%; 
    margin: 0;   
    font-size: 16px;   
    background-color: #000;
    color: #fff;
    font-family: 'Lato', sans-serif;  
}

a {
    text-decoration: none;   
    color: #555; 
}

p {
	text-align: center;	
}

/* Nav Bar Styles */

nav {
    text-align: right;
	width: 100%;
	background-color: #fff; 
	font-size: 1.4em;
	padding: 0;
	padding-top: .5%;
	padding-bottom: .6%;  
}

.navigation {
    display: inline;
    margin: .5%;
	 
}

.logo {
	color:#000;	
	display: inline;
	float: left;
	margin: 0 0 0 1%;
}

/* Banner */

div.background {
	margin: 0;
    width: 100%;
	min-height: 650px;
	background-image: url("../img/br.jpg");
	background-sizeP: cover;
	background-repeat: no-repeat;	
	
}

/* Skills */

div.section {
	width: 100%;	
	min-height: 200px;
	background-color: #fff;
	color: #000;
	margin: 0;		
}

.skills {
	float: left;
	width: 33%;	
}

.expertise {
	text-align: center;
	margin: 2% 2% 2% 2%;
	font-size: 1.2em;	
}

.details {
	padding: 2%;	
}



/* Footer */

footer {
    text-align: center;
	padding-bottom: .4%;  
    margin: 0;
	font-size: 79%;
	color: #000;
	background-color: #fff;     
}

a.btn {
   width: 11%;
   margin: auto;
   margin-top: .8%;
   padding: .5%;
   display: block;
   text-align: center; 
   border: 1px solid #fff;
   font-size: 1.2em;
   background-color: #000;
   color: #fff;
   border-radius: 3px;   
}

.btn:hover {
	
    background-color: #fff;
    color: #000;
	border: solid 1px #000;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Brian Funderburke Photography &amp; Design</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/custom.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body>
<header>
  
    <nav>
        <h1 class="logo">B.Fun Photography &amp; Design</h1>
            <ul>
                <li class="navigation"><a href="home.html">Home</a></li>
                <li class="navigation"><a href="photography.html">Photography</a></li>
                <li class="navigation"><a href="design.html">Design</a></li>
                <li class="navigation"><a href="about.html">About</a></li>
                <li class="navigation"><a href="contact.html">Contact</a></li>
            </ul>
    </nav>
    
</header>

<div class="background">

</div>

<div class="section">
    <div class="skills">
        <h2 class="expertise">Photography</h2>
            <p class="details">Let me capture your beautiful moments for you! I shoot everything from weddings to landscapes.</p>
    </div>
    <div class="skills">
        <h2 class="expertise">Design</h2>
            <p class="details">From logo design to business cards. Your products deserve to look beautiful.</p>
    </div>
    <div class="skills">
        <h2 class="expertise">Web Development</h2>
            <p class="details">Handcrafted websites help ensure you stand out in today's crowded online ecosystem!</p>
    </div>
    <a href="contact.html" class="btn">Get In Touch!</a>
</div>

<footer>
    <p>&#169; 2016 Brian Funderburke. All Rights Reserved.</p>
</footer>

</body>
</html>

Answer 1

是“显示：块”，它占据了“.section”的整个容器。尝试去除宽度，你会看得更清楚。（至于为什么文本在底部，这是因为你有“vertical-align：baseline”。它是高的，因为其他元素在容器中浮动，所以它被推到它们下面。

由于某些无法解释的原因，按钮改变了大小

1 个答案: