获取页脚链接到右侧并排列左侧的文本

时间：2014-09-08 03:29:24

标签： html css footer

我的页脚左侧有一些文字，我希望我的链接位于右侧，但同时排列在左侧的文字。我试图将链接浮动到右边，但不仅链接不按顺序排列，它们也不与左边的文本对齐。

jsfiddle - http://jsfiddle.net/gL2xtezz/2/ 

<!DOCTYPE html>

<html lang="en">

<head>
    <title>Taffies Cupakes</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="container">
    <header>
        <a href="index.html"><img src="images/header.png" alt="taffies logo"></a>
    </header> <!-- end of header -->

    <aside class="sidebar">
    <nav>
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about us</a></li>
            <li><a href="orders.html">orders</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </nav> <!-- end of nav -->

        <div class="company_info">
            <p>Taffies cupcakes</p>
            <p>111 x drive road</p>
            <p>milton keynes</p>
            <p>l0002</p><br>
            <p>telephone: 078 878-8888</p>
        </div> <!-- end of compnay info text -->

</aside> <!-- end of aside -->

<section class="first_article">
    <article>
        <p class="first_main_paragraph">Welcome to Taffies Cupcakes website! In here you will find various types of cupcakes we offer. Our cupcakes are fresh and we deliver in 24 hours. </p>
        <p class="second_main_paragraph">Check out the gallery section to see which type of cupcake you prefer. If you don't see your favorite, you can contact us and give us suggestions on what other type of cupcakes we should offer. We take feedback seriously and want to provide the best cupcakes to our customers.</p>
        <a href="orders.html"><img src="images/contact-button.png" alt="contact_button" class="contact_button"></a>
        <img src="images/cupcake.png" alt="cupcake" class="cupcake">
    </article>
</section> <!-- end of section -->

<footer>
    <p>Taffie's Cupcakes &copy; copyright 2014</p>
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about us</a></li>
            <li><a href="orders.html">orders</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="contact.html">contact us</a></li>
        </ul>
</footer> <!-- end of footer -->

</div> <!-- end of container -->
</body> 
</html>



*{
    margin:0px;
    padding:0px;
    list-style-type:none;
}

header,nav,section,article,aside,footer{
    display:block;
}

.container{
    width:960px;
    margin:0 auto;
}

body{
    background-color:#e8d4cb;
}

header img{
    padding:43px;
    display:block;
    margin:0 auto;
    box-sizing:border-box;
}

.first_article{
    float:left;
    width:500px;
    margin:25px;
}

.first_main_paragraph{
    font-family:arial;
    font-size:20px;
    color:#846a5f;
    margin-bottom:50px;
}

.second_main_paragraph{
    font-family:arial;
    font-size:13px;
    color:#846a5f;
}

.first_article .contact_button{
    float:left;
    margin-top:165px;
}

.first_article .cupcake{
    float:left;
    margin-top:20px;
    margin-left:19px;
}

.sidebar{
    float:left;
    margin:30px;
    margin-right:40px;
}

nav ul li a{
    text-decoration:none;
    font-family:myriad pro;
    font-size:20px;
    color:#3d2316;
    display:inline-block;
    padding-left:85px;
    padding-right:29px;
    padding-top:26px;
    padding-bottom:26px;
    width:39%;  
}

nav ul li:hover a{
    color:#e8d5cc;
}

nav ul li{
    margin-bottom:3px;
    background-color: #CBAFA2;
}

nav ul li:hover{
    background-color: #3D2316;
}

.company_info{
    background-color:#cbafa2;
    padding:20px;
    text-align:right;
    margin-bottom:100px;
    font-size:14px;
    color:#3d2316;
    font-family:myriad pro;
}

.about_section{
    float:left;
    width:500px;
    margin:25px;
}

.about_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}

.about_text{
    font-family:arial;
    font-size:13px;
    color:#846a5f;
}

.orders_section{
    float:left;
    width:500px;
    margin:25px;
}

.orders_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}

.second_order{
    margin-top:50px;
}

.order_text{
    font-family:arial;
    font-size:11px;
    color:#846a5f;
}

.order_numbers{
    color:#3D2316;
}

.gallery_section{
    float:left;
    width:600px;
    margin:25px;
}

.gallery_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}

.contact_section{
    float:left;
    width:500px;
    margin:25px;
}

.contact_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}

.contact_text{
    font-family:arial;
    font-size:13px;
    color:#846a5f;
}

footer{
    clear:both;
    font-family:arial;
    border-top:1px solid #aa8573;
    height:100px;
}

footer p{
    color:#784f3d;
    margin:10px;
    float:left;
}

footer ul li a{
    text-decoration:none;
    font-size:13px;
    color:#784f3d;
    margin:10px;
    float:left;

}

footer ul li a:hover{
    color:#3d2316;
}

figure{
    float:left;
    margin:25px;
}

figcaption{
    text-align:center;
    font-family:arial;
    font-size:13px;
    color:#846a5f;
    margin-top:15px;
}

span{
    font-family:arial;
    font-size:15px;
    color:#846a5f;
    font-weight:bold;
}

2 个答案:

答案 0 :(得分：1)

更改li的顺序，并使用float: right至footer ul li

JSFiddle - DEMO

<强> CSS： 

*{
    margin:0px;
    padding:0px;
    list-style-type:none;
}

header,nav,section,article,aside,footer{
    display:block;
}

.container{
    width:960px;
    margin:0 auto;
}

body{
    background-color:#e8d4cb;
}

header img{
    padding:43px;
    display:block;
    margin:0 auto;
    box-sizing:border-box;
}

.first_article{
    float:left;
    width:500px;
    margin:25px;
}

.first_main_paragraph{
    font-family:arial;
    font-size:20px;
    color:#846a5f;
    margin-bottom:50px;
}

.second_main_paragraph{
    font-family:arial;
    font-size:13px;
    color:#846a5f;
}

.first_article .contact_button{
    float:left;
    margin-top:165px;
}

.first_article .cupcake{
    float:left;
    margin-top:20px;
    margin-left:19px;
}

.sidebar{
    float:left;
    margin:30px;
    margin-right:40px;
}

nav ul li a{
    text-decoration:none;
    font-family:myriad pro;
    font-size:20px;
    color:#3d2316;
    display:inline-block;
    padding-left:85px;
    padding-right:29px;
    padding-top:26px;
    padding-bottom:26px;
    width:39%;  
}

nav ul li:hover a{
    color:#e8d5cc;
}

nav ul li{
    margin-bottom:3px;
    background-color: #CBAFA2;
}

nav ul li:hover{
    background-color: #3D2316;
}

.company_info{
    background-color:#cbafa2;
    padding:20px;
    text-align:right;
    margin-bottom:100px;
    font-size:14px;
    color:#3d2316;
    font-family:myriad pro;
}

.about_section{
    float:left;
    width:500px;
    margin:25px;
}

.about_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}

.about_text{
    font-family:arial;
    font-size:13px;
    color:#846a5f;
}

.orders_section{
    float:left;
    width:500px;
    margin:25px;
}

.orders_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}

.second_order{
    margin-top:50px;
}

.order_text{
    font-family:arial;
    font-size:11px;
    color:#846a5f;
}

.order_numbers{
    color:#3D2316;
}

.gallery_section{
    float:left;
    width:600px;
    margin:25px;
}

.gallery_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}

.contact_section{
    float:left;
    width:500px;
    margin:25px;
}

.contact_title{
    color:#3d2316;
    margin-bottom:50px;
    font-family:arial;
    font-size:30px;
}

.contact_text{
    font-family:arial;
    font-size:13px;
    color:#846a5f;
}

footer{
    clear:both;
    font-family:arial;
    border-top:1px solid #aa8573;
    height:100px;
}

footer p{
    color:#784f3d;
    margin:10px;
    float:left;
}

footer ul li a {
    text-decoration:none;
    font-size:13px;
    color:#784f3d;
    margin:10px;
    float:left;

}
footer ul li {
    float: right;
}
footer ul li a:hover{
    color:#3d2316;
}

figure{
    float:left;
    margin:25px;
}

figcaption{
    text-align:center;
    font-family:arial;
    font-size:13px;
    color:#846a5f;
    margin-top:15px;
}

span{
    font-family:arial;
    font-size:15px;
    color:#846a5f;
    font-weight:bold;
}

<强> HTML： 

<!DOCTYPE html>

<html lang="en">

<head>
    <title>Taffies Cupakes</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="container">
    <header>
        <a href="index.html"><img src="images/header.png" alt="taffies logo"></a>
    </header> <!-- end of header -->

    <aside class="sidebar">
    <nav>
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about us</a></li>
            <li><a href="orders.html">orders</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </nav> <!-- end of nav -->

        <div class="company_info">
            <p>Taffies cupcakes</p>
            <p>111 x drive road</p>
            <p>milton keynes</p>
            <p>l0002</p><br>
            <p>telephone: 078 878-8888</p>
        </div> <!-- end of compnay info text -->

</aside> <!-- end of aside -->

<section class="first_article">
    <article>
        <p class="first_main_paragraph">Welcome to Taffies Cupcakes website! In here you will find various types of cupcakes we offer. Our cupcakes are fresh and we deliver in 24 hours. </p>
        <p class="second_main_paragraph">Check out the gallery section to see which type of cupcake you prefer. If you don't see your favorite, you can contact us and give us suggestions on what other type of cupcakes we should offer. We take feedback seriously and want to provide the best cupcakes to our customers.</p>
        <a href="orders.html"><img src="images/contact-button.png" alt="contact_button" class="contact_button"></a>
        <img src="images/cupcake.png" alt="cupcake" class="cupcake">
    </article>
</section> <!-- end of section -->

<footer>
    <p>Taffie's Cupcakes &copy; copyright 2014</p>
        <ul>
            <li><a href="contact.html">contact us</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="orders.html">orders</a></li>
            <li><a href="about.html">about us</a></li>
            <li><a href="index.html">home</a></li>
        </ul>
</footer> <!-- end of footer -->

</div> <!-- end of container -->
</body> 
</html>

答案 1 :(得分：0)

<强> jsBin demo 

footer ul{
  float:right; /* FLOAT RIGHT UL INSTEAD */
}
footer li{
  display:inline-block; /* needed */
}
footer ul li a{
  display:inline-block; /* needed in order to add padding. */
  padding: 10px;        /* Add some padding to your links, UX, remember? */
  text-decoration:none;
  font-size:13px;
  color:#784f3d;
  /* margin:10px; Not needed, accounted it all to padding! */
  /* float:left;  Not needed */
}
footer ul li a:hover{
  color:#3d2316;
}
相关问题
最新问题