Question

我正在尝试创建一个基本网页。我希望在顶部有按钮用于登录或注册，但无论我做什么，我都无法让它们移动到标题的右下角。他们通常只是在中心，我试图漂浮他们，但这绝对没有用。在CSS中使用样式按钮的好方法是什么？

HTML：

＆＃13;

    .clear {
	clear: both;
    }

    #container{
        margin: 0 auto;
        max-width: 1200px;
    }
    header {
        width: 94%;
        padding: 3%;
        background-color: #F3D22D;
    }
    header #title {
        font-size: 50px;
        color: #fff;
    }
    nav {
        width: 97%;
        background-color: #DDCFC5;
        padding: 0 1.5% 0 1.5%;
    }
    nav ul li {
        display: inline-block;
        padding: 15px 1.5% 15px 1.5% ;
    }
    nav ul li a {
        text-decoration: none;
        color: #ffffff;
        font-size: 1.2em;
    }
     nav ul li a:hover {
         color: #000000;
         text-decoration: none;
     }
     #content {
        float: left;
        padding: 3%;
        width: 64%;
    }
    aside {
        float: right;
        padding: 3%;
        width: 24%;
        background-color: #DDCFC5;
    }
    footer{
        width: 94%;
        padding: 3%;
        background-color: #F3D22D;
        border-top: 5px solid #DDCFC5;
        color: #fff;
        text-align: center;
    }
    @media all and (max-width : 768px) {
        header {
            text-align: center;
        }
        nav {
            text-align: center;
        }
        #content {
            width: 94%;
            padding: 3%;
        }
        #sidebar {
            width: 94%;
            padding: 3%;
            border-top: 3px solid #E64A19;
        }
    }
    @media all and (max-width : 330px) {
        nav ul li {
            display:block;
            width: 94%;
        }
    }

    button {
	    background-color: #4CAF50;
	    border: none;
	    color: white;
	    padding: 15px 32px;
	    text-align: center;
	    text-decoration: none;
	    display: inline-block;
	    font-size: 16px;
	    margin: 4px 2px;
	    cursor: pointer;
    }

    #usermenu {
	    bottom: 0;
	    left: 0;
    }

＆＃13;

    <!DOCTYPE html>
    <html>
	    <head>
		<title>Website</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link type="text/css? rel="stylesheet" href="reset.css" />
		<link type="text/css" rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div id="container">
			<!-- header -->
			<header id="header">
				<h1 id="title">Website</h1>
				<div id="usermenu">
					<button  type="button">Login</button>
					<button type="button">Sign Up</button>
				</div>
			</header>
			<!-- navigation -->
			<nav id="menu" class="clearfix">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>

			    <!-- main content area -->
			
			    <section id="content">
				    <h2>Built with HTML5 and CSS3</h2>
				    <p>
					    More content here................
					    <br>
					    Hello... blah blahblah
				    </p>
			    </section>
			
			    <!-- sidebar -->
			    <aside id="sidebar">
				    <h3>This is the sidebar</h3>
				    <p>content goes here...</p>
			    </aside>
			    <div class="clear"></div>
			    <!-- footer -->
			    <footer id="footer" class="clearfix">
				    Copyright &copy Gregory Soble 2017
			    </footer>
		    </div>
	    </body>
    </html>

＆＃13;

Answer 1

默认情况下，元素的position是静态的，因此top，right，bottom和left的值根本不起作用。您需要为元素/元素赋予position另一个值才能“定位”它们。

.clear {
clear: both;
}

#container{
    margin: 0 auto;
    max-width: 1200px;
}
header {
    position: relative;
    width: 94%;
    padding: 3%;
    background-color: #F3D22D;
}
header #title {
    font-size: 50px;
    color: #fff;
}
nav {
    width: 97%;
    background-color: #DDCFC5;
    padding: 0 1.5% 0 1.5%;
}
nav ul li {
    display: inline-block;
    padding: 15px 1.5% 15px 1.5% ;
}
nav ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 1.2em;
}
 nav ul li a:hover {
     color: #000000;
     text-decoration: none;
 }
 #content {
    float: left;
    padding: 3%;
    width: 64%;
}
aside {
    float: right;
    padding: 3%;
    width: 24%;
    background-color: #DDCFC5;
}
footer{
    width: 94%;
    padding: 3%;
    background-color: #F3D22D;
    border-top: 5px solid #DDCFC5;
    color: #fff;
    text-align: center;
}
@media all and (max-width : 768px) {
    header {
        text-align: center;
    }
    nav {
        text-align: center;
    }
    #content {
        width: 94%;
        padding: 3%;
    }
    #sidebar {
        width: 94%;
        padding: 3%;
        border-top: 3px solid #E64A19;
    }
}
@media all and (max-width : 330px) {
    nav ul li {
        display:block;
        width: 94%;
    }
}

button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

#usermenu {
    position: absolute;
    bottom: 0;
    right: 0;
}

    <div id="container">
        <!-- header -->
        <header id="header">
            <h1 id="title">Website</h1>
            <div id="usermenu">
                <button  type="button">Login</button>
                <button type="button">Sign Up</button>
            </div>
        </header>
        <!-- navigation -->
        <nav id="menu" class="clearfix">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

            <!-- main content area -->

            <section id="content">
                <h2>Built with HTML5 and CSS3</h2>
                <p>
                    More content here................
                    <br>
                    Hello... blah blahblah
                </p>
            </section>

            <!-- sidebar -->
            <aside id="sidebar">
                <h3>This is the sidebar</h3>
                <p>content goes here...</p>
            </aside>
            <div class="clear"></div>
            <!-- footer -->
            <footer id="footer" class="clearfix">
                Copyright &copy Gregory Soble 2017
            </footer>
        </div>

将按钮移动到标题的右下角

1 个答案: