页脚上的位置元素

Question

我有这个代码片段，我想定位像 this 这样的元素；有人可以帮我吗？我无法按我想要的方式定位它，因为元素不会移动（静态）或 [overflow-y idk]。
能想到的都试过了，不知道怎么办。

编者注：我不知道你说的overflow-y idk是什么意思。请澄清，OP.

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

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

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

<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>

Answer 1

试着把你的 margin-left 从所有人身上移除，然后给他们一个 float: left。之后，您可以按照自己的方式调整 div 的宽度。

Answer 2

<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 3

你可以使用这个：

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

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

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

 <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>

Answer 4

这应该有效，通过使用您的 css，

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


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

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

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

<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>

页脚上的位置元素

Position elements on Footer

html

css

footer