css 잘하시는분 좀 봐주세요 ㅠㅠ
본문
게시판 밑에 페이지 버튼을 만들어서 넣었는데요.
이게 화면에서 자꾸 왼쪽으로 치우쳐서 화면을 줄이고 늘리면 같이 안움직이고 고정되어있어요 ㅠㅠ
아시는분 좀 도와주세요~
<div class="page">
<span class="prev">이전</span> <span class="pageNum <?=$nowPage?>"><?=$i?></span> <span class="next">다음</span>
</div>
/*page css*/
.page{
margin: 10px 0px 0 0;
width: 100%;
color: #4b4b4b;
text-align: center;
}
.page span{
float: left;
background: #f2f2f2;
margin: 0 0 0 7px;
color: 4b4b4b!important;
}
.page .prev,.pageNum,.page .next{
border: 1px solid #ccc;
padding: 6px 9px 6px 9px;
display: block;
border-radius: 3px;
background: url("/images/buttonGray.png") repeat-x left bottom;
box-shadow: 0 0 2px 0 rgba(0,0,0,.15);
color: #4b4b4b!important;
}
.page .pageNum{
color: #4b4b4b!important;
box-shadow: 0 0 2px 0 rgba(0,0,0,.15)
}
.page .nowPage{
font-weight: bold;
color: #2662bb!important;
}
답변 2
.page{
margin: 10px 0px 0 0;
width: 100%;
color: #4b4b4b;
text-align: center;
}
를
.page{
margin: 10px auto 0 auto;
width: 100%;
color: #4b4b4b;
text-align: center;
}
로 바꿔보세요
아 width 100%네요 ㅋㅋ width는 auto로 하시는게 나을거에요.
/*page css*/.page{
margin: 10px 0px 0 0;
width: 100%;
color: #4b4b4b;
text-align: center;
}
.page span{
// float: left; 제거
background: #f2f2f2;
margin: 0 0 0 7px;
color: 4b4b4b!important;
}
.page .prev,.pageNum,.page .next{
border: 1px solid #ccc;
padding: 6px 9px 6px 9px;
//display: block; 제거
border-radius: 3px;
background: url("/images/buttonGray.png") repeat-x left bottom;
box-shadow: 0 0 2px 0 rgba(0,0,0,.15);
color: #4b4b4b!important;
}
.page .pageNum{
color: #4b4b4b!important;
box-shadow: 0 0 2px 0 rgba(0,0,0,.15)
}
.page .nowPage{
font-weight: bold;
color: #2662bb!important;
}