0
좋아요. 그래서 제 웹 페이지 (http://jsfiddle.net/HVGBf/)를 가지고 있지만 제대로 작동하고 싶지 않습니다.내 CSS 레이아웃이 정상적으로 작동하지 않습니다.
작은 브라우저에서 볼 수 있듯이 로고 텍스트가 줄 높이 때문에 튀어 나오고 있습니다. 가능한 경우 프로젝트 이름을 나란히두고 싶습니다. 그렇지 않으면 서로간에 있어야하지만 어떻게 수행 할 수 있습니까?
HTML :
<body class="home">
<div id="wrapper">
<div id="logo">
<span>Project name</span>
</div><!-- endLogo -->
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Over ons</a></li>
<li><a href="">Projecten</a></li>
<li><a href="">Vrienden</a></li>
<li><a href="">Doneren</a></li>
<li><a href="">Contact</a></li>
</ul>
</div><!-- endMenu -->
</div>
</body>
</html>
CSS는 :
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
html, body { font-family: "helvetica", arial; margin: 0; padding: 0; height:100%;}
#wrapper {
min-width: 800px;
}
.home #logo {
background: #00B65F;
width: 22%;
float: left;
padding: 0 1% 0 2%;
text-align: right;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
line-height: 180px;
height: 180px;
font-size: 220%;
}
.home #logo span {
font-color: #000;
}
.home #menu {
background-color: #000;
float: right;
background-repeat: repeat;
padding: 56px 5% 56px 1%;
-webkit-border-top-left-radius: 15px ;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
margin-left: 6%;
width: 63%;
height: 70px;
}
#menu ul {
float: left;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
list-style-type: none;
}
#menu a {
float: left;
text-decoration: none;
font-size: 150%;
color: #fff;
padding: 0.4em 0.7em 0.4em 0.7em;
-webkit-border-radius: 10px;
border-radius: 10px;
display: block;
}
#menu a:hover, #menu .active { background-color: #00B65F; }
무례한 (내 의도가 아닌) 죄송합니다. 그런 질문은 "나를 위해해라." (나는'code'와'? '물음표를 볼 수 없다.) 대부분 닫힐 것이다. –
죄송합니다. "나란히"와 "서로에게"의미하는 바를 이해하지 못합니다. 당신은 정교 할 수 있습니까? – Zhihao
로고 "Project Name"로고를 나란히 표시하고 싶습니다. #logo의 너비가 너무 작고 "프로젝트 이름"의 너비가 #logo 너비보다 커서이 "프로젝트 (줄 바꿈) 이름"처럼 보이지 않는 경우 가능하지 않다면 – Peacy