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

بازدید63.8kپست ها3آخرین فعالیت5 سال پیش
0
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;*/
}

سوال برنامه نویسی دارید؟

هیچ وقت در پرسیدن سوال شک نکنید

خوش آمدید

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