如何纠正李文重叠 [英] how to rectify li text overlapping

问题描述

在下面的代码中，我无法完全按照它的要求使用'display：inline'。

ul id'sbmenu'下所有五个li中的所有文本都是重叠的没有出现在单行上。

In the following code I am unable to use 'display:inline' exactly as what it has to do.
All the text in all the five li's under ul id'sbmenu'are overlapping and not appearing as a single line.

#submenu li ul
{
 display:none;
}
#submenu li
{
 top:22px;
  left:314px;
 position:absolute;
display:inline;
width:300px;
}

<div id="header">
<h1>Vasan heights</h1>
<ul id="submenu"  class="submenu">
<li class="sbmenu"> Home </li>
<li class="sbmenu"> About us </li>
<li class="sbmenu">Projects

     <ul>
                <li><a href="#">Completed</a></li>
                <li><a href="#">On going</a></li>
                <li><a href="#">About to start</a></li>
                <li><a href="#">Photo Gallery</a></li>
            </ul>

            </li>

<li class="sbmenu">Contact Us</li>
<li class="sbmenu">Mail us</li>
</ul>

</div> <%--header--%>

推荐答案

您好，



只需将您的CSS更改为这个：

Hi,

Just change your css to this:

#submenu li
{
 top:22px;
 left:314px;
 position:inherit;
 display:inline;
 width:300px;
}

查看这些链接如何使用位置：

http://www.w3schools.com/css/css_positioning.asp [ ^ ]

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ [ ^ ]



问候，

Praneet

Check these links on how to use position:
http://www.w3schools.com/css/css_positioning.asp[^]
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/[^]

Regards,
Praneet

你的#header高度定义为51px。要么删除它要么调整它。

首先尝试删除它，看看它看起来和你想要什么类型的外观和感觉。

看，你正在应用这个类父div，因此你必须先看看它。

通过调整它，你的菜单和子菜单将在它下面。



此致，

Praneet

Hi,
Your #header has height defined as 51px. Either remove it or adjust it.
First try removing it and see how it looks and what type of look and feel you want.
See, you are applying the class to parent div, hence you will have to look at it first.
By adjusting this, your menu and submenu will come under it.

Regards,
Praneet

这篇关于如何纠正李文重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！