頁腳上的位置元素

Question

我有這個片段，我想定位像this;有人可以幫我嗎？ 我無法像我想要的那樣定位它，因爲元素不會移動（靜態）或[overflow-y idk]。
我試過了所有我能想到的東西，而且我不知道該怎麼做。

編者按：我不知道你的意思是overflow-y idk。請澄清，OP。

footer { 
 
\t width: 100%; 
 
\t height:60px; 
 
\t background-color :#e5e5e6; 
 
\t margin :0; 
 
\t padding: 0; 
 
\t overflow: auto; 
 
    border-top: 0.1px solid #6ca204; 
 
} 
 
footer #copyright { 
 
\t text-align: center; 
 
\t color : #4A4444; 
 
\t padding :15px; 
 
} 
 

 
.login { 
 
\t background-color:transparent; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
\t color:#4A4444; 
 
\t font-family: 'Questrial', sans-serif; 
 
\t text-transform: uppercase; 
 
\t font-size:15px; 
 
\t padding:8px 21px; 
 
\t text-decoration:none; 
 
\t margin-left: 93%; 
 
\t overflow:auto; 
 
} 
 
.login:hover { 
 
\t text-decoration: underline; 
 
} 
 

 
.PT { 
 
\t background-color:transparent; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
\t color:#4a4444; 
 
\t font-family: 'Questrial', sans-serif; 
 
\t text-transform: uppercase; 
 
\t font-size:20px; 
 
\t padding:8px 8px; 
 
\t text-decoration:none; 
 
\t margin-left: 80%; 
 
\t overflow:auto; 
 
\t border: 1px solid #6ca204; 
 
\t border-radius: 50%; 
 
} 
 
.EN { 
 
\t background-color:transparent; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
\t color:#4a4444; 
 
\t font-family: 'Questrial', sans-serif; 
 
\t text-transform: uppercase; 
 
\t font-size:20px; 
 
\t padding:7px 7px; 
 
\t text-decoration:none; 
 
\t margin-left: 80%; 
 
\t overflow:auto; 
 
\t border: 0.1px solid #6ca204; 
 
\t border-radius: 50%; 
 
}

<footer> 
 
\t \t <a href="#" class="login">Log in</a> 
 
\t \t <a href="#" class="PT">PT</a> 
 
\t \t <a href="#" class="EN">EN</a> 
 
\t \t <p id ="copyright">&copy; HardSecure 2017-2017</p> 
 
\t </footer>

Answer 1

<footer> 
    <a href="#" class="login">Log in</a> 
    <a href="#" class="PT">PT</a> 
    <a href="#" class="EN">EN</a> 
    <p id ="copyright">&copy; HardSecure 2017-2017</p> 
</footer> 
<style> 
footer { 
width: 100%; 
height:60px; 
background-color :#e5e5e6; 
margin :0; 
padding: 0; 
/*verflow: auto;*/ 
border-top: 0.1px solid #6ca204; 
} 
footer a { 
    float: right; 
} 
footer #copyright { 
text-align: center; 
color : #4A4444; 
padding :15px 15px 0px 0px; 
} 


.login { 
background-color:transparent; 
cursor:pointer; 
color:#4A4444; 
font-family: 'Questrial', sans-serif; 
text-transform: uppercase; 
font-size:15px; 
padding:8px 21px; 
text-decoration:none; 
overflow:auto; 
} 
.login:hover { 
text-decoration: underline; 
} 

.PT { 
background-color:transparent; 
cursor:pointer; 
color:#4a4444; 
font-family: 'Questrial', sans-serif; 
text-transform: uppercase; 
font-size:20px; 
padding:8px 8px; 
text-decoration:none; 
border: 1px solid #6ca204; 
border-radius: 50%; 
} 
.EN { 
background-color:transparent; 
cursor:pointer; 
color:#4a4444; 
font-family: 'Questrial', sans-serif; 
text-transform: uppercase; 
font-size:20px; 
padding:7px 7px; 
text-decoration:none; 
border: 0.1px solid #6ca204; 
border-radius: 50%; 
} 

試試這個上面，你可能需要調整它

Answer 2

嘗試從所有這些刪除您margin-left，給他們一個float: left。之後，你可以用div的寬度工作。

Answer 3

您可以使用此：

footer { 
 
    \t width: 100%; 
 
    \t height:60px; 
 
    \t background-color :#e5e5e6; 
 
    \t margin :0; 
 
    \t padding: 0; 
 
    \t overflow: auto; 
 
     border-top: 0.1px solid #6ca204; 
 
     position: relative; 
 
     justify-content:center; 
 
     direction: rtl; 
 
    } 
 
    footer #copyright { 
 
    \t text-align: center; 
 
     color: #4A4444; 
 
     position: absolute; 
 
     width: 100%; 
 
     bottom: 0; 
 
    } 
 

 
    .login { 
 
    \t background-color:transparent; 
 
    \t display:inline-block; 
 
    \t cursor:pointer; 
 
    \t color:#4A4444; 
 
    \t font-family: 'Questrial', sans-serif; 
 
    \t text-transform: uppercase; 
 
    \t font-size:15px; 
 
    \t padding:8px 21px; 
 
    \t text-decoration:none; 
 
    \t margin-left: auto; 
 
    \t overflow:auto; 
 
     vertical-align: top; 
 
    } 
 
    .login:hover { 
 
    \t text-decoration: underline; 
 
    } 
 

 
    .EN, .PT { 
 
    \t background-color:transparent; 
 
    \t display:inline-block; 
 
    \t cursor:pointer; 
 
    \t color:#4a4444; 
 
    \t font-family: 'Questrial', sans-serif; 
 
    \t text-transform: uppercase; 
 
    \t font-size:20px; 
 
    \t padding:7px 7px; 
 
    \t text-decoration:none; 
 
    \t 
 
    \t overflow:auto; 
 
    \t border: 0.1px solid #6ca204; 
 
    \t border-radius: 50%;  
 
    } 
 

 

<footer> 
 
    \t \t <a href="#" class="login">Log in</a> 
 
    \t \t <a href="#" class="PT">PT</a> 
 
    \t \t <a href="#" class="EN">EN</a> 
 
    \t \t <p id ="copyright">&copy; HardSecure 2017-2017</p> 
 
    \t </footer>

Answer 4

這應該工作，用你的CSS ，

footer { 
 
\t width: 100%; 
 
\t height:60px; 
 
\t background-color :#e5e5e6; 
 
\t margin :0; 
 
\t padding: 0; 
 
\t overflow: auto; 
 
    border-top: 0.1px solid #6ca204; 
 
} 
 

 

 
.login { 
 
\t background-color:transparent; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
\t color:#4A4444; 
 
\t font-family: 'Questrial', sans-serif; 
 
\t text-transform: uppercase; 
 
\t font-size:15px; 
 
\t padding:8px 21px; 
 
\t text-decoration:none; 
 
\t //margin-left: 93%; 
 
\t overflow:auto; 
 
    float:right; 
 
} 
 
.login:hover { 
 
\t text-decoration: underline; 
 
} 
 

 
.PT { 
 
\t background-color:transparent; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
\t color:#4a4444; 
 
\t font-family: 'Questrial', sans-serif; 
 
\t text-transform: uppercase; 
 
\t font-size:20px; 
 
\t padding:8px 8px; 
 
\t text-decoration:none; 
 
\t //margin-left: 80%; 
 
    float:right; 
 
\t overflow:auto; 
 
\t border: 1px solid #6ca204; 
 
\t border-radius: 50%; 
 
    margin:5px; 
 
} 
 
.EN { 
 
\t background-color:transparent; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
\t color:#4a4444; 
 
\t font-family: 'Questrial', sans-serif; 
 
\t text-transform: uppercase; 
 
\t font-size:20px; 
 
\t padding:7px 7px; 
 
\t text-decoration:none; 
 
\t //margin-left: 80%; 
 
\t overflow:auto; 
 
\t border: 0.1px solid #6ca204; 
 
\t border-radius: 50%; 
 
    float:right; 
 
    margin: 7px; 
 
} 
 

 
footer #copyright { 
 
\t text-align: center; 
 
\t color : #4A4444; 
 
\t padding :20px; 
 
    margin:auto; 
 
    display:inline-block; 
 
    width:100%; 
 
    position:absolute; 
 
}

<footer> 
 
\t \t <a href="#" class="login">Log in</a> 
 
\t \t <a href="#" class="PT">PT</a> 
 
\t \t <a href="#" class="EN">EN</a> 
 
\t \t <p id ="copyright">&copy; HardSecure 2017-2017</p> 
 
</footer>