메뉴 정렬 문의드립니다.
관련링크
본문
메뉴가 가운대로 되어있는데.. 왼쪽 끝부분 정렬 시킬수 없을까요...
/*---------------------------
total
----------------------------*/
body {
text-align:center;
font-family:none;
background-color:#be4d2 /*상단 접속자 배경*/
}
#mw5 {
width:100%;
/*width:1050px;*/
margin:0 auto 0 auto;
text-align:left;
}
.wrapper {
width:1050px;
margin:0 auto 0 auto;
text-align:left;
position:relative;
}
.top {
border-bottom:1px solid #ccc;
background-color:#be4d2; /*상단 접속자 배경*/
padding:5px 5px 0 5px;
height:22px;
margin:0 0 0 0;
}
.head {
padding:30px 0 20px 0;
background-color:#be4d2; /* 상단 배경 색상표*/
text-align:center;
}
.container {
margin:10px 0 0 0;
}
.sidebar {
float:right;
width:200px;
}
.main {
width:740px;
width:-webkit-calc(100% - 310px); /* for Chrome, Safari */
width: -moz-calc(100% - 310px); /* for Firefox */
width: calc(100% - 310px); /* for IE */
overflow:hidden;
background-color:#fff;
padding:10px;
box-shadow: 0px #EBEBEB;
border-radius: 3px;
border: 1px solid;
border-color: #E5E5E5 #D3D3D3 #B9C1C6;
background-color:#f2f4f7;/* 게시판 배경색+ */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.main nav.pg_wrap {
border:0;
}
/*---------------------------
top 상단 글자색
----------------------------*/
.top a {
font-size:.9em;
color:#000000;
}
.top ul {
margin:0;
padding:0;
list-style:none;
display:table;
}
.top li {
display:table-cell;
}
.top li:after {
content:'|';
padding:0 5px 0 5px;
color:#ddd;
}
.top li:last-child:after {
content:'';
padding:0;
}
.top .left {
float:left;
}
.top .right {
float:right;
}
/*---------------------------
head
----------------------------*/
.head .wrapper {
width:auto;
margin:0 auto 0 auto;
display:table;
}
.head div {
vertical-align:top;
}
/*---------------------------
logo
----------------------------*/
.head .logo {
display:table-cell;
display:absolute;
font-size:3em;
font-weight:bold;
padding-right:10px;
}
.head .logo a {
text-decoration:none;
}
/*---------------------------
search-box 545E67검색 테두리 및
----------------------------*/
.head .search-box {
display:table-cell;
margin:0 0 0 100px;
padding-right:150px;
}
.head .search-box form {
margin:0;
padding:0;
}
.head .search-text {
border:3px solid #d3c2b0; /* 검색바라인; /* total color */
height:29px;
float:left;
margin:0 0 7px 0;
width:220px; /* 검색 길이; /* total color */
}
.head .search-text input {
border:0;
font-size:1.5em;
font-weight:bold;
line-height:25px;
width:98%;
margin:5px 0 0 5px;
outline:none;
background-color:transparent;
}
.head .search-button {
width:50px;
height:35px;
border:0 solid #bfe3f7; /* total color */
background-color:#d3c2b0; /* 검색버튼 색상 */
color:#82704c; /* 검색 글자색상 */
font-weight:bold;
cursor:pointer;
float:left;
margin:0 0 0 7px;
}
/*---------------------------
quick-link
----------------------------*/
.head .quick-link {
clear:both;
}
.head .quick-link ul {
margin:0;
padding:7px 0 0 0;
list-style:none;
display:table;
}
.head .quick-link li {
display:table-cell;
}
.head .quick-link li:after {
content:'|';
padding:0 5px 0 5px;
color:#ddd;
}
.head .quick-link li:last-child:after {
content:'';
}
/*---------------------------
선택 밑줄 색상
----------------------------*/
nav {
border-bottom:3px solid #e5e2d1; /* 밑줄라인 색상 */
}
.navbar {
clear:both;
background-color:#e5e2d1; /* 상단메뉴 바 배경 색상 */
height:40px;
margin:0;
padding:0;
list-style:none;
}
.navbar a:hover,
.navbar a:link,
.navbar a:active,
.navbar a:visited {
color:#000000; /* 상단 메뉴글자색 */
text-decoration:none;
font-size:1.2em;
height:40px;
line-height:40px;
}
.navbar li.item {
float:left;
font-weight:bold;
float:left;
padding:0;
height:40px;
}
.navbar li.item a {
display:block;
padding:0px 21px 0 21px;
font-weight:normal;
}
.navbar ul:first-child li .new {
margin:0 0 0 5px;
color:#e74c3c;
font-weight:bold;
position:absolute;
margin:-2px 0 0 -5px;
background-color:#e74c3c;
color:#fff;
padding:2px 7px 2px 7px;
border-radius:10px;
opacity:0.8;
font-size:.7em;
line-height:1.4em;
}
.navbar li.select {
float:left;
display:block;
padding:0;
background-color:#dbd6bb; /* 상단메뉴 선택 색상 */
height:40px;
}
.navbar li.select a {
display:block;
padding:0px 21px 0 21px;
}
.navbar li.underline {
height:37px;
border-bottom:3px solid #dbd6bb; /* 선택 밑줄 색상 */
}
.navbar li .caret {
font-size:.5em;
padding-left:5px;
}
.navbar ul.dropdown {
display:none;
position:absolute;
background-color:#dbd6bb; /* 매뉴 하단 출력 배경색 */
z-index:9999;
border:1px solid #bbb;
width:150px;
padding:0;
margin:40px 0 0 0;
box-shadow:5px 5px 10px #777;
list-style:none;
}
.navbar ul.dropdown li {
height:35px;
color:#000;
padding:0;
border-bottom:1px solid #fff;
}
.navbar ul.dropdown li:hover {
background-color:#e5e2d1; /* 메뉴 선택 하단 메뉴 선택 색상 */
cursor:pointer;
}
.navbar ul.dropdown a:link,
.navbar ul.dropdown a:visited,
.navbar ul.dropdown a:hover,
.navbar ul.dropdown a:active {
color:#000;
text-decoration:none;
font-size:1em;
line-height:35px;
width:100%;
height:100%;
padding-left:12px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display:block;
}
.navbar ul.dropdown:before {
content:'';
position:absolute;
border-style:solid;
border-width:0 5px 10px;
border-color:#fff transparent;
display:block;
width:0;
z-index:1;
top:-10px;
left:20%;
}
.navbar ul.dropdown li .new {
margin:0 0 0 5px;
color:#e74c3c;
font-weight:bold;
position:static;
background-color:#e74c3c;
color:#fff;
padding:2px 7px 2px 7px;
border-radius:10px;
opacity:0.8;
font-size:.7em;
}
.navbar li.nothing {
color:#000000;
float:left;
padding:0;
height:40px;
line-height:40px;
}
.navbar li.nothing a {
text-decoration:underline;
font-size:1em;
}
/*---------------------------
sidebar
----------------------------*/
.sidebar-nav {
margin:10px 0 10px 0;
padding:10px;
border:1px solid #ccc;
background-color:#000000;
box-shadow: 0 1px #EBEBEB;
border-radius: 3px;
border: 1px solid;
border-color: #E5E5E5 #D3D3D3 #B9C1C6;
background-color:#e5e2d1; /*우측 메뉴 베경 색상*/
}
.sidebar-nav ul {
padding:0;
margin:0;
list-style:none;
}
.sidebar-nav ul li {
padding:0;
margin:0;
height:30px;
background-color:#e5e2d1; /*우측 메뉴 색상*/
border-bottom:1px solid #e5e2d1; /*우측메뉴 가로줄 색상*/
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
position:relative;
}
/*
.sidebar-nav ul li:hover {
background-color:#bdc3c7;
}
*/
.sidebar-nav ul li.selected {
/*background-color:#bdc3c7;*/
font-weight:bold;
}
.sidebar-nav ul li.selected a {
font-weight:bold;
color:#e74c3c;
text-decoration:underline;
}
.sidebar-nav ul li a {
display:block;
width:100%;
height:100%;
line-height:30px;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
margin:0;
padding:0 0 0 25px;
text-decoration:none;
}
.sidebar-nav ul li a:hover {
color:#FF59AA; /*우측메뉴 선택시 색상*/
text-decoration:underline;
}
.sidebar-nav ul li.sidebar-brand {
background-color:#dbd5bb; /*우측메뉴 제목 바탕 첫번째 제목바*/
}
.sidebar-nav ul li.sidebar-brand a {
padding:0 0 0 10px;
color:#836a44; /*우측메뉴제목 색상*/
text-decoration:none;
}
.sidebar-nav ul li.sidebar-brand a:hover {
text-decoration:none;
}
.sidebar-nav ul li .new {
margin:0 0 0 5px;
color:#e74c3c;
font-weight:bold;
background-color:#e74c3c;
color:#fff;
padding:2px 7px 2px 7px;
border-radius:10px;
opacity:0.8;
font-size:.7em;
}
.sidebar-nav ul li .count {
position:absolute;
right:11px;
line-height:30px;
color:#8e4d12;
}
/*---------------------------
etc
----------------------------*/
.popular {
position:absolute;
right:10px;
}
.blank {
border:0;
margin:0;
padding:0;
clear:both;
font-size:0;
line-height:0;
height:0;
}
.block {
background-color:#DBDBDB;
padding:10px;
margin:0 0 10px 0;
box-shadow: 0 1px #fff;
border-radius: 3px;
border: 1px solid;
border-color: #E5E5E5 #D3D3D3 #B9C1C6;
background-color:#e5e2d1; /* 투표 최신글 메뉴박스 색 */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
/*---------------------------
latest
----------------------------*/
.latest {
width:100%;
display:table;
table-layout:fixed;
}
.latest div.item {
display:table-cell;
padding-bottom:10px;
}
.latest div.item:first-child {
padding-right:10px;
}
.latest div.item:nth-child(2n) {
padding-left:10px;
}
.theme {border-bottom:1px dotted #dde4e9}
.theme div {margin:0 auto;width:970px;zoom:1}
.theme div:after {display:block;visibility:hidden;clear:both;content:""}
.theme h2 {float:left;padding:10px 45px 10px 0}
.theme ul {float:left;margin:0;padding:0;list-style:none}
.theme li {float:left}
.theme a {display:inline-block;padding:10px;text-decoration:none}
.theme a:focus, #theme a:hover {}
.footer {
background-color:#e5e2d1; /*하단 배경 색상*/
text-align:center;
margin:10px 0 0 0;
}
.footer ul {
margin:0 auto 0 auto;
padding:0;
text-align:center;
list-style:none;
display:table;
}
.footer li {
margin:0;
padding:0 10px 0 0;
display:table-cell;
}
.footer li:last-child {
padding:0;
}
.footer .banners {
padding:10px 0 0 0;
}
.footer .menu li {
padding:10px 0 0 0;
}
.footer .menu li:after {
content:"|";
padding:0 5px 0 5px;
color:#ccc;
}
.footer .menu li:last-child:after {
content:'';
}
.footer .copyright {
padding:10px 0 10px 0;
}
#device_change {
margin:0;
padding:10px 0 10px 0;
border:0;
border-radius:0;
}
.main {
width:740px;
width:-webkit-calc(100% - 310px); /* for Chrome, Safari */
width: -moz-calc(100% - 310px); /* for Firefox */
width: calc(100% - 310px); /* for IE */
overflow:hidden;
background-color:#000000;
padding:10px;
box-shadow: 0 1px #EBEBEB;
border-radius: 3px;
border: 5px solid;
border-color: #E5E2D1 #E5E2D1 #E5E2D1; /* 사각 테두리 색상+ */
background-color:#fff;/* 게시판 배경색+ */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
답변 1
.sidebar-nav ul li a {
- display: block;
- width: 100%;
- height: 100%;
- line-height: 30px;
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- margin: 0;
- padding: 0 0 0 0px;
- text-decoration: none;
}