html - CSS Sprite 不与文本对齐

Question

我正在尝试创建一个在网页顶部有用户导航栏的网站。但是，我无法让 Sprite 、“profile-in”和“arrow”与文本“Alfred the Awful”对齐。我认为这是我的 CSS 样式表代码中缺少的东西，但我似乎无法弄清楚 CSS 样式表的哪一部分是错误的。

如果有人能帮我看看这个，我将不胜感激。

谢谢!

* {
   font-family: sans-serif;
   font-size: 16px;
}

*, html {
   box-sizing: border-box;
}

header {
   height: 50px;
   border-bottom: 1px solid gray;
   background-color: #F1F1F1;
}

header h1 {
   font-size: 1.5em;
   font-weight: bold;
   margin-left: 50px;
   line-height: 50px;
}

h1, h2, h3 {
   font size: 100%;
   font-weight: normal;
}

h2 {
   display: block;
   font size: 1.5em;
   font-weight: bold;
}

div {
   display: block;
}

.message {
   margin-left: 50px;
}

.select_users {
   position: absolute;
   right: 65px;
   top: 15px;
}

.profile-out, .profile-in, .arrow {
   display: inline-block;
}

.select_users h2 a {
   font-weight: bold;
   font-size: 0.9em;
   color: black;
   text-decoration: none;
}

.select_users h2 a:hover {
   color: #A32824;
}

ul.users_menu, ul.admin_menu {
    position: absolute;
    right: 0;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #F1F1F1;
}

ul.users_menu {
   width: 200px;
}

ul.admin_menu {
   width: 150px;
   display: none;
}

ul.users_menu a, ul.admin_menu a {
   text-decoration: none;
   color: black;
} 

.users_menu li a, .admin_menu li a  {
   font-size: 0.75em;
   padding: 5px;
   display: block;
}

ul.users_menu li a:hover, .admin_menu li a:hover {
   background-color: #A32824;
   color: white;
}

ul.users_menu li.logout {
   border-top: 1px solid grey;
   text-transform: uppercase;
}

ul.users_menu li.logout a {
   background-color: white;
   color: black;
}

ul.users_menu li.logout a:hover {
   background-color: black;
   color: white;
}

.admin_users, .admin_movies {
   margin-top: 40px;
   margin-left: 50px;
}

.admin_users h2, .admin_movies h2 {
   font-size: 1.25em;
   margin-bottom: 20px;
}

.admin_table {
   border-spacing: 2px;
   border-collapse: separate;
}

.admin_table th {
   font-weight: bold;
   text-align: left;
   background-color: #F1F1F1;
}

.admin_table th, .admin_table td, .admin_table input {
   height: 35px;
   width: 200px;
}

th.admin_col, td.deletecell, td.insertcell {
   width: 80px;
}

.admin_table th, .admin_table input {
   padding-left: 5px;
   padding-right: 5px;
}

.admin_table input {
   font-size: 0.9em;
}

.admin_table input:focus {
   background-color: #FEE5AC;
}

.admin_table th, .admin_table td {
   border: 1px solid black;
}

input {
   outline: none;
   border: none;
}

input::-ms-clear {
   display: none;
}

.favs_list {
    float: left;
    width: 175px;
    margin-left: 45px;
}

.favs_list h2 {
   font-size: 0.8em;
   font-weight: bold;
   margin-top: 20px;
   margin-bottom: 10px;
   margin-left: 5px;
}


ul.favs {
    width: 170px;
    
}

ul.favs li a {
   display: block;
   font-size: 0.75em;
   text-decoration: none;
   color: black;
   padding: 7px 5px 7px 5px;
}

ul.favs li a:hover {
   color: white;
   background-color: #A32824;
}

.movie_list, .movie_single {
    margin-left: 225px;
    width: 610px;
    border: 1px dotted gray;
}

.movie_list {
   padding-top: 10px;
}

.welcome {
   font-size: 0.8em;
   text-align: justify;
   padding: 10px 10px 20px 10px;
   border-bottom: 1px dotted gray;
}

.movie_list h2, .movie_single h2 {
   font-size: 1.3em;
   padding: 5px 10px 10px 10px;
}

.movie_list ul {
   padding-top: 20px;
}

.movie_list li {
   padding-bottom: 10px;
}

.movie_list h3 a {
   font-size: 1.1em;
   color: #438BC5;
   font-weight: bold;
   display: block;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   text-decoration: none;
}

.movie_list h3 a:hover {
   text-decoration: underline;
}


.thumbnail {
    width: 178px;
    height: 100px;
}

.movie_list figcaption {
   display: inline-block;
   vertical-align: top;
   padding-left: 20px;
}

.movie_list .description {
   font-size: 0.75em;
   width: 400px;
   text-align: justify;
   padding-right: 10px;
}

.movie_player {
   width: 608px;
   height: 344px;
}

.movie_single h3 {
   font-size: 1.3em;
   padding: 10px;
}

.movie_single p {
   font-size: 0.8em;
   padding: 10px;
}

.movie_single .description {
   font-size: 0.75em;
   min-height: 80px;
   text-align: justify;
}

.actions {
   position: relative;
   height: 37px;
   border-bottom: 1px solid #CCC;
}

.actions .add_remove {
   position: absolute;
   right: 10px;
}

.actions .add_remove p {
   font-size: 0.75em;
   font-weight: bold;
   color: #999;
}

.actions .add_remove p:hover {
   color: black;
   border-bottom: 3px solid #993300;
}

/* All the sprite images */
.trash-hover, .trash, .delete, .delete-hover, .fav, .fav-hover, .insert, .insert-hover, .arrow, .arrow-hover, .profile-out, .profile-in, .success{
	background: url('../images/sprites.png') no-repeat;
}

.trash-hover{
	background-position: 0 -61px ;
	width: 60px;
	height: 60px;
}

.trash{
	background-position: 0 0;
	width: 60px;
	height: 60px;
}

.delete{
	background-position: 0 -130px ;
	width: 20px;
	height: 20px;
}

.delete-hover{
	background-position: -21px -130px ;
	width: 20px;
	height: 20px;
}

.fav{
	background-position: 0 -154px ;
	width: 20px;
	height: 20px;
}

.fav-hover{
	background-position: -21px -154px ;
	width: 20px;
	height: 20px;
}

.insert{
	background-position: 0 -177px ;
	width: 20px;
	height: 20px;
}

.insert-hover{
	background-position: -21px -177px ;
	width: 20px;
	height: 20px;
}

.arrow{
	background-position: -47px -132px ;
	width: 10px;
	height: 10px;
}

.arrow-hover{
	background-position: -47px -142px ;
	width: 10px;
	height: 10px;
}

.profile-out{
	background-position: 0 -199px ;
	width: 30px;
	height: 30px;
}

.profile-in{
	background-position: -33px -199px ;
	width: 30px;
	height: 30px;
}

.success{
	background-position: -44px -177px ;
	width: 20px;
	height: 20px;
}
/* End of sprite images */

footer {
    clear: both;
    height: 60px;
    border-top: 1px dotted gray;
    border-bottom: 1px dotted gray;
    margin-top: 30px;
}

footer p {
   line-height: 60px;
   margin-left: 50px;
   font-size: 0.7em;
   font-weight: bold;
}


footer a {
   font-size: inherit;
   color: black;
}

footer a:hover {
   color: #A32824;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <link href="css/reset.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href="sprites/sprites.css" rel="stylesheet">
        
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <script src="scripts/html5shiv-printshiv.js"></script>
        <![endif]-->
                             
        <title>Instant Update Database Project by WebinAction.co.uk</title>        
    </head>
    
<body>
    <header>
        <h1>Instant Update Database Project</h1>
    </header>

<nav class="navigation">
    <div class="select_users">
            <h2><a href='#'>Alfred the Awful</a></h2>    </div>
    <div class="profile-in"></div>
    <div class="arrow"></div>
    
    <ul class = 'users_menu'><li><a href='#'>Albert Square</a></li><li><a href='#'>Bill Gaits</a></li><li><a href='#'>Gromit </a></li><li><a href='#'>James Olivier</a></li><li><a href='#'>King Beans II</a></li><li><a href='#'>Michael Douglas</a></li><li><a href='#'>Mike Cheeseyman</a></li><li><a href='#'>Mr Movieman</a></li><li><a href='#'>Steven Seagul</a></li><li><a href='#'>Sweeney Toad</a></li><li><a href='#'>The Queen of Sheba</a></li><li><a href='#'>Wallace </a></li><li class='logout'><a href='index.php'>Logout</a></li></ul>    
    <ul class="admin_menu">
        <li><a href="admin.php?page=users">Manage users</a></li>
        <li><a href="admin.php?page=movies">Manage movies</a></li>
    </ul>
</nav>

<nav class="favs_list">
    <h2>Favourites</h2>
    <ul class="favs">
        <li><a href="#">Movie Title</a></li>
        <li><a href="#">Movie Title</a></li>
        <li><a href="#">Movie Title</a></li>
    </ul>
    <div class='trash'></div>            
</nav> <section class="movie_list">
    <h2>Hi, (username will appear here)</h2>
    <p class="welcome">Here are some movies you might like.
    Click on the heart icon to add them to your favourites list.</p>
    <ul>
        <li>
            <figure><a href="#"><img class="thumbnail" alt="Thumbnail"
                    src="images-movies/thumbnail.png"></a>
                <figcaption>
                    <h3><a href="#">Movie Title</a></h3>
                    <div class="description">Movie description</div>
                    <div class="add_remove favourite"></div>
                </figcaption>
            </figure>
        </li>
        <li>
            <figure><a href="#"><img class="thumbnail" alt="Thumbnail"
                    src="images-movies/thumbnail.png"></a>
                <figcaption>
                    <h3><a href="#">Movie Title</a></h3>
                    <div class="description">Movie description</div>
                    <div class="add_remove add favourite"></div>
                </figcaption>
            </figure>
        </li>
        <li>
            <figure><a href="#"><img class="thumbnail" alt="Thumbnail"
                    src="images-movies/thumbnail.png"></a>
                <figcaption>
                    <h3><a href="#">Movie Title</a></h3>
                    <div class="description">Movie description</div>
                    <div class="add_remove favourite"></div>
                </figcaption>
            </figure>
        </li>
    </ul>
</section>        <footer>
            <p>Instant update database project by <a href="mailto:learn@webinaction.co.uk">learn@webinaction.co.uk</a></p>
        </footer>
        
    </body>
</html>

Answer 1

您应该能够像定位文本一样执行position: absolute，所以像这样:

.profile-out {
  position: absolute;
  top: 25px;
  right: 30px;
}

希望对你有帮助