مشکل در padding در ساخت منو

CSS

توسط souda در 4 سال پیش
0 63.3k 3 4 سال پیش
souda daniel behnamdesigner
0

سلام خسته نباشید من این منو رو طراحی کردم ولی تو margin و padding ایراد دارم .میشه کمکم کنید.

.menu
{
	width:502px;
	height:40px;
	/*background-color:#F30;/*remove*/
	float:right;
	margin-right:4px;
	margin-top:12px;
	line-height:20px;
	
}

.menu ul
{
	float:left;
}

.menu ul li
{
	float:left;
	list-style-type:none;
	height:40px;
	text-align:center;
} 

.menu ul li a
{
	color:#FFBA00;
	display:block;
	text-decoration:none;
	height:22px;
	font-family:arial;
	font-size:14px;
}
.menu ul li a:hover
{
	text-decoration:underline;
}	
/*.menu-home
{
	margin-right:26px;
}*/

li.line
{
	border-left-width:1px;
	border-left-style:solid;
	border-color:#999;
	
}

.icon
{	width:16px;
	 height:16px;
	 background-image:url(../images/icon.png);
	 background-repeat:no-repeat;
	 /*margin-right:26px;
	 margin-left:1px;*/
} 

<div class="menu">
            	<ul>
                	<li><a href="#" title="" class="menu-home">Become a member</a></li>
                    <li class="line"><a href="#" title="">Business</a></li>
                    <li class="icon"></li>
                    <li class="line"><a href="#" title="">Academic </a></li>
                    <li class="icon"></li>
                    <li class="line"><a href="#" title="">Government</a></li>
                    <li class="icon"></li>
                </ul>
            </div>
آخرین ویرایش: 19-07-2015 ساعت 16:36، توسط Daniel
0

heightها رو پاک کنید فقط به a خاصیت padding بدید نه به li.

0

مرسی .من به هرکدوم که padingیا marginمیدادم یا borderها بهم میریخت یاicon هایی که گذاشتم.مجبور شدم به liهای padding بدم. 1-چه جوری ارتفاع بردر ها کم کنم؟(درواقع من میخوام منوی سایت lyndaرو طراجی کنم) 2-این جوری borderذاشتن کار منطقی هست یا نه؟

1

سلام ارتفاع border همون ارتفاع li هست. معمولا نیازی نیست به هیچکدوم height بدید.

.menu
{
    /*background-color:#F30;/*remove*/
    float:right;
    margin-right:4px;
    margin-top:12px;
    line-height:20px;
}

.menu ul
{
    float:left;
}

.menu ul li
{
    float:left;
    list-style-type:none;
    padding: 5px 5px 5px 15px;
}

.menu ul li a
{
    color:#FFBA00;
    display:block;
    text-decoration:none;
    font-family:arial;
    font-size:14px;
}
.menu ul li a:hover
{
    text-decoration:underline;
}    
/*.menu-home
{
    margin-right:26px;
}*/

li.line
{
    border-left-width:1px;
    border-left-style:solid;
    border-color:#999;
    
}

.icon
{    width:16px;
     height:16px;
     background-image:url(../images/icon.png);
     background-repeat:no-repeat;
     /*margin-right:26px;
     margin-left:1px;*/
}

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید