Question

我有这个片段，我想定位像this这样的元素;有人可以帮我吗？我不能像我想要的那样定位它，因为元素不会移动（静态）或[溢出-idk]。
我已经尝试了所有我能想到的东西，而且我不知道该怎么做。

编者注：我不知道overflow-y idk的意思。请澄清，OP。

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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并为其{{1}}。之后，你可以按照div的宽度工作。

Answer 3

您可以使用：

＆＃13;

    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%;     
    }

＆＃13;

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

＆＃13;

Answer 4

这应该可以使用你的css，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>
     <a href="#">Total</a>
     <input type="text">
    </li>
    <li>
     <a href="#">Squat</a>
     <input type="text">
    </li>
    <li>
     <a href="#">Benchpress</a>
     <input type="text">
    </li>
    <li>
     <a href="#">Deadlift</a>
     <input type="text">
    </li>
  </ul>
</div>

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

在页脚上定位元素

4 个答案: