Question

我正在尝试制作一个简单的页脚框，左边有一些文字，右边有一些文字，但是当我将正确的文字位置设置为float: right;时，只有60％左右右边。

道歉，如果这是超级简单的，但我一直在看着它，只是无法得到它。

这是我的CSS和HTML代码供参考。（忽略空类，它们将在以后使用）

CSS：

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);

html {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 20px;
    background-image: url('images/backgrounds/wallpaper.jpg');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: RGBA(255,255,255,0.6);
}

body  {
    width: 70%;
    margin: auto;
    background-color: RGBA(200,200,200,0.4);
    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-bottom: 20px;
    padding-top: 10px;
    border-radius: 6px;
}

div {

    width: 95%;
    margin: auto;
    background-color: RGBA(50,50,50,0.95);

}

.alignleft {float: left;}

.alignright {float: right;}

.header {

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}


.main {



}

.footer{

    margin: auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;

}

.footerText {

    font-size: 13px;
    color: RGBA(255,255,255,0.3);
    width: 350px;

}

HTML：

<!DOCTYPE html>

<html>

<head>

    <title>Site for Things and Stuff</title>

    <!-- Style Sheets/Scripts/Misc Stuff -->
    <link rel="stylesheet" type="text/css" href="style.css">


</head>

<body>

<div class='header'>HEADER TEST HEADER TEST</div>
<div class='main'>MAIN CONTENT TEST MAIN CONTENT TEST</div>


<!-- Footer -->
<div class='footer'>
<p class="footerText alignleft">No images are owned by this website unless specified.
<br><br>To recieve help with an issue on the website or other matters, please use the contact button above.</p>
<p class="footerText alignright">Test test test</p>
<div style="clear:both"></div>

</div>
</body>
</html>

Answer 1

在text-align:right;类

中添加.alignright

.alignright {
    float: right;
    text-align:right;
 }

浮动：对;没有一路漂浮

1 个答案: