如何将菜单和下拉菜单放在中心位置

时间：2015-03-01 11:14:49

标签： javascript html css

我建立了一个新的菜单和下拉菜单，我希望你能帮助我集中精力，因为我无法成功。

CODE：

.drop_menu {
	background:#005555;
	padding:0;
	margin:15px 0;
	list-style-type:none;
	height:30px;
	width: 100%;
}

.drop_menu li 
{ 
    float:right;  
}

.drop_menu li a 
{
	padding:9px 20px;
	display:block;
	color:#fff;
	text-decoration:none;
	font:12px arial, verdana, sans-serif;
}

.drop_menu ul 
{
	position:absolute;
	right:-9999px;
	top:-9999px;
	list-style-type:none;
}
.drop_menu li:hover 
{ 
    height: 100%;
    position:relative; 
    background:#5FD367; 
}
.drop_menu li:hover ul 
{
	right:0px;
	top:30px;
	background:#5FD367;
	padding:0px;
}

.drop_menu li:hover ul li a {
	padding:5px;
	display:block;
	width:168px;
	text-indent:15px;
	background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover 
{ 
    background:#005555;
}
    <body dir="rtl">
        <div class="drop">
            <ul class = "drop_menu">
                <li ><a href="Default.aspx">דף הבית</a>
                </li>

                <li><a href="Registration.aspx">הרשמה</a>
                </li>

                <li><a href="Login.aspx">התחברות</a>
                </li>

                <li><a href="Default.aspx">אודות</a>
                </li>

                <li><a href="Default.aspx">צור קשר</a>
                </li>

                <li><a href="Default.aspx">קישורים נוספים</a>
                    <ul>
                        <li><a href="Gallery.aspx">תיק עבודות</a></li>
                        <li><a href="#">תת תפריט</a></li>
                        <li><a href="#">תת תפריט</a></li>
                    </ul>
                </li>
            </ul>
        </div>
</body>

请帮助我，如果解决方案不简单，那么如果你向我解释一下会很好，因为我是新生儿并且在学校里学习，所以我们不关注设计事情。谢谢你们：）

2 个答案:

答案 0 :(得分：2)

  1. 你有浮动：在你的li中，它们会移到页面右侧，删除它，然后使用display:inline-block。
  2. 在.drop-menu
    3. 中添加text-align:center;

    使用float：right时，数据将像浮动对象一样，其宽度将与您的内容有关。如果你删除它，你需要指定一个宽度，所以你可以让inline-block告诉你的标签宽度基于它的内容。

    .drop_menu {
	background:#005555;
	padding:0;
	margin:15px 0;
	list-style-type:none;
	height:30px;
	text-align:center;
}

.drop_menu li 
{ 
    display:inline-block;
}

.drop_menu li a 
{
	padding:9px 20px;
	display:block;
	color:#fff;
	text-decoration:none;
	font:12px arial, verdana, sans-serif;
}

.drop_menu ul 
{
	position:absolute;
	right:-9999px;
	top:-9999px;
	list-style-type:none;
}
.drop_menu li:hover 
{ 
    height: 100%;
    position:relative; 
    background:#5FD367;         
}
.drop_menu li:hover ul 
{
	right:0px;
	top:30px;
	background:#5FD367;
	padding:0px;
}

.drop_menu li:hover ul li a {
	padding:5px;
	display:block;
	width:168px;
	text-indent:15px;
	background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover 
{ 
    background:#005555;
}
        <body dir="rtl">
        <div class="drop">
            <ul class = "drop_menu">
                <li ><a href="Default.aspx">דף הבית</a>
                </li>

                <li><a href="Registration.aspx">הרשמה</a>
                </li>

                <li><a href="Login.aspx">התחברות</a>
                </li>

                <li><a href="Default.aspx">אודות</a>
                </li>

                <li><a href="Default.aspx">צור קשר</a>
                </li>

                <li><a href="Default.aspx">קישורים נוספים</a>
                    <ul>
                        <li><a href="Gallery.aspx">תיק עבודות</a></li>
                        <li><a href="#">תת תפריט</a></li>
                        <li><a href="#">תת תפריט</a></li>
                    </ul>
                </li>
            </ul>
        </div>
</body>

答案 1 :(得分：1)

只需将菜单设置为内嵌块并使其以文本对齐为中心。

.drop {
 text-align:center;
 background:#005555;
}

.drop_menu {
	background:#005555;
	padding:0;
	margin:15px 0;
	list-style-type:none;
	height:30px;
    display:inline-block;
	
}

.drop_menu li 
{ 
    float:right;  
}

.drop_menu li a 
{
	padding:9px 20px;
	display:block;
	color:#fff;
	text-decoration:none;
	font:12px arial, verdana, sans-serif;
}

.drop_menu ul 
{
	position:absolute;
	right:-9999px;
	top:-9999px;
	list-style-type:none;
}
.drop_menu li:hover 
{ 
    height: 100%;
    position:relative; 
    background:#5FD367; 
}
.drop_menu li:hover ul 
{
	right:0px;
	top:30px;
	background:#5FD367;
	padding:0px;
}

.drop_menu li:hover ul li a {
	padding:5px;
	display:block;
	width:168px;
	text-indent:15px;
	background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover 
{ 
    background:#005555;
}
    <body dir="rtl">
        <div class="drop">
            <ul class = "drop_menu">
                <li ><a href="Default.aspx">דף הבית</a>
                </li>

                <li><a href="Registration.aspx">הרשמה</a>
                </li>

                <li><a href="Login.aspx">התחברות</a>
                </li>

                <li><a href="Default.aspx">אודות</a>
                </li>

                <li><a href="Default.aspx">צור קשר</a>
                </li>

                <li><a href="Default.aspx">קישורים נוספים</a>
                    <ul>
                        <li><a href="Gallery.aspx">תיק עבודות</a></li>
                        <li><a href="#">תת תפריט</a></li>
                        <li><a href="#">תת תפריט</a></li>
                    </ul>
                </li>
            </ul>
        </div>
</body>

相关问题
最新问题