Question

我一直试图让文字显示在我的样式列表的右侧。我开始为我的ul和div设置一个固定的宽度，但后边距保持不变。我将ul和div的边距设置为0px，这似乎不会影响div的边距。（我用chrome的检查元素完成了它）。如果还有另一种方法可以将文本放在我的列表的右侧，而不会弄乱任何其他内容，我会很感激，但我想知道我的边缘发生了什么。

<div class="bar">           
        <div class="nav">                
            <h1><a href="#" id="JETS">Lorem Ipsum<br>Lorem Ipsum</a></h1>
            <ul class="nav">
                <li class="active"><a href="#" id="ML1">Lorem</a></li>
                <li><a href="#" id="ML2">Lorem</a></li>
                <li><a href="#" id="ML3">Lorem</a></li>
                <li><a href="#" id="ML4">Lorem</a></li>
                <li><a href="#" id="ML5">Lorem</a></li>       
           </ul>
        </div>
    </div>

    <div class="Lmenu">
        <ul class="Lmenu">
            <ul id="Lmenu1">
                <li><a href="#" class="majorL">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>                
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>     
                <br>  
            </ul>         
            <ul id="Lmenu2">
                <li><a href="#" class="majorL">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>                
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li> 
                <br>
            </ul>              
            <ul  id="Lmenu3">
                <li><a href="#" class="majorL">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>                
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>
                <br>
            </ul>              
            <ul id="Lmenu4">
                <li><a href="#" class="majorL">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>                
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li> 
                <br>
            </ul>
        </ul>
    </div>  

    <h2>this is supposed to be up on the right
    </h2>

    <div id="foot">
    </div>

这是我的css（忽略不整洁）

h1 {
font-size:16pt;
font-family:sans-serif;
margin-left:10px;
display:inline-block;
width:280px;
text-align:center;
float:left;}

a#JETS {
text-decoration:none;
color:#000000;
display:block}

body {
margin:0;}

div#foot {
position: relative;
bottom: 0px;
left: 0px;
width:100%;
background-color:#d0d0d0;
height:100px;}

 /*****************************************************************
                    navigation bar
 *****************************************************************/
 div.bar {
position: absolute;
top: 0px;
left: 0px;
width:100%;
background-color:#d0d0d0;
height:79px;}
div.nav {
width:1080px;
margin-left:auto;
margin-right:auto;
}
ul.nav {
list-style-type:none;
display:inline;
text-align:center;
margin-top:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
font-family:sans-serif
}
/************Links**************/
.active #ML1 {
text-shadow:0px 0px 15px #000;
color:#000;
}
ul.nav a:link, ul.nav a:visited {
display:inline-block;
font-size:14pt;
text-align:center;
text-decoration:none;
color:#000000;
padding:28px;
background-color:#d0d0d0;
width:100px;
float:left;
}
ul.nav a:hover, ul.nav a:active {
background-color:#d0d0d0;
box-shadow:inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3)
}
/*******************************/

/****************************************************************/

/*****************************************************************
                    Left Menus
*****************************************************************/
div.Lmenu {
width:162px;
margin:0;
}
ul.Lmenu, ul.Lmenu ul {
margin-bottom:0px;
padding:0px;
list-style-type:none;
text-decoration:none;
}
ul.Lmenu {
margin-top:79px;
width:162px;
}
/************Links**************/
ul.Lmenu ul a:hover, ul.Lmenu ul a:active {
color:#000;
}
/*to style all the links on the left*/
ul.Lmenu a:link, ul.Lmenu a:visited {
font-family:sans-serif;
display:inline-block;
font-size:12pt;
text-align:center;
text-decoration:none;
color:#747474;
padding:8px 2px;
width:150px;
 }
/*to make the major links on the left larger and black*/
ul.Lmenu a:link.majorL, ul.Lmenu a:visited.majorL {
font-size:14pt;
color:#000000;
padding:5px 2px;
}
/*to make the links on the left glow when hovered or clicked*/
ul.Lmenu a:hover, ul.Lmenu a:active {
box-shadow:inset 0px 0px 60px 0px #ccc
}
/*******************************/

/*********Lines on left**********/

/*to highlight the bars on the left when hovering over the ul*/
ul#Lmenu1 {
border-left:8px solid #ddd;
width:154px;
}
ul#Lmenu1:hover {
border-left:8px solid #eee;
width:154px;
}
ul#Lmenu2 {
border-left:8px solid #ddd;
width:154px;
}
ul#Lmenu2:hover {
border-left:8px solid #eee;
width:154px;
}
ul#Lmenu3 {
border-left:8px solid #ddd;
width:154px;
}
ul#Lmenu3:hover {
border-left:8px solid #eee;
width:154px;
 }
ul#Lmenu4 {
border-left:8px solid #ddd;
width:154px;
}
ul#Lmenu4:hover {
border-left:8px solid #eee;
width:154px;
}
/*******************************/

/****************************************************************/

我尝试像某些建议一样漂浮，但这搞砸了我的网站的另一部分，我最初没有显示

problem

floated ul.Lmenu to the left

我需要一个不会弄乱其余部分的答案

如果您需要更多信息，请告诉我

Answer 1

<div>是一个块级元素，这意味着它会自动填充100％宽度，除非您使用float或不同的显示属性指定不同。

所以这是一种可能性：将div.Lmenu {float:left;}添加到您的样式中。这将使菜单向左浮动，<h2>将在其右侧。

Answer 2

添加

.Lmenu {
    float: left;
}

Demo

请注意，您应该清除浮动，在标题后使用clear: both设置元素样式，或者将列表和标题放在overflow不同于visible的包装中。

Div保证金不会消失

2 个答案: