태그에 두 개의 정렬되지 않은 목록 <ul>이 있습니다. 목록 항목은 가로로 표시되며 두 목록은 그 사이의 공백으로 구분됩니다. 내가 원하는 것은 브라우저 바닥에 바닥 글의 위치를 수정하는 것입니다.꼬리말의 고정 된 위치 지정은 컨테이너에서 콘텐츠를 가져옵니다. - CSS
문제 :
내가 CSS의 position 속성을 사용하여 고정에 바닥 글의 위치를 설정하려고 한 목록은 footer 용기 밖으로 얻을 수 있지만 위치가 첫 번째 목록에, 즉 수평을 동일하게 유지 그 안에는 footer 컨테이너 안에 있습니다.
footer의 위치를 상대으로 설정하면 두 번째 목록이 footer 컨테이너 내부로 반환됩니다.
질문 : 내가 잘못 무슨
을하고 있는가?
관련 코드 : https://codepen.io/anon/pen/dVPyvG
당신은 footer에 추가하여 화면의 전체 폭에 바닥 글을 확장 할 수 있습니다 : 대신 left: 835px의
left: 0;
right: 0;
을 list-2 당신이 float:right을 추가 할 수 있습니다에 컨테이너에 오른쪽으로 보관하려면 다음을 사용하십시오.
.list-container + .list-container {
float: right;
}
데모 아래를 참조
당신이`남은 않는 이유
* {
margin: 0;
padding: 0;
}
footer {
background: #eee;
height: 50px;
position: fixed;
bottom: 0;
left: 0; /* ADDED */
right: 0; /* ADDED */
border: solid 5px red;
}
footer ul {
line-height: 50px;
}
.list-container {
display: inline-block;
}
footer ul li {
display: inline-block;
margin-right: 10px;
}
#list-1 {
padding-left: 15px;
}
#list-2 {
position: relative;
/*left: 835px;*/
}
.list-container + .list-container {
float: right; /* ADDED */
}<html>
<head>
<title>Fake Google Homepage</title>
<link rel="stylesheet" type="text/css" href="fakeGoogle.css">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<footer>
<div class="list-container">
<ul id="list-1">
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</div>
<div class="list-container">
<ul id="list-2">
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
<li>Use Google.com</li>
</ul>
</div>
</footer>
</body>
</html>이 조각을 시도 :
footer{
background: #eee;
height: 50px;
position: absolute; //use absolute for position
bottom: 0px;
width:100%; //add width
border: solid 5px red;
}
는 width:100% 또는 width:100vw를 사용하여 바닥 글 컨테이너의 폭을 설정합니다.
*{
margin: 0;
padding: 0;
}
footer{
background: #eee;
width:100%;
height: 50px;
position: fixed;
bottom: 0;
border: solid 5px red;
}
footer ul{
line-height: 50px;
}
.list-container{
display: inline-block;
}
footer ul li{
display: inline-block;
margin-right: 10px;
}
#list-1{
padding-left: 15px;
}
#list-2{
position: relative;
left: 835px;
}<html>
<head>
<title>Fake Google Homepage</title>
<link rel="stylesheet" type="text/css" href="fakeGoogle.css">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<footer>
<div class="list-container">
<ul id="list-1">
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</div>
<div class="list-container">
<ul id="list-2">
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
<li>Use Google.com</li>
</ul>
</div>
</footer>
</body>
</html>
: 835px'을'목록-2'에? – kukkuz
두 번째 목록을 화면의 오른쪽에 표시되도록하십시오. 첫 번째 목록을 맨 아래 모서리에 표시하고 두 번째 목록을 오른쪽 하단에 표시하려고합니다. – Yousaf