我一直试图让文字显示在我的样式列表的右侧。我开始为我的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;
}
/*******************************/
/****************************************************************/
我尝试像某些建议一样漂浮,但这搞砸了我的网站的另一部分,我最初没有显示
我需要一个不会弄乱其余部分的答案
如果您需要更多信息,请告诉我
答案 0 :(得分:1)
<div>
是一个块级元素,这意味着它会自动填充100%宽度,除非您使用float或不同的显示属性指定不同。
所以这是一种可能性:
将div.Lmenu {float:left;}
添加到您的样式中。这将使菜单向左浮动,<h2>
将在其右侧。
答案 1 :(得分:0)
添加
.Lmenu {
float: left;
}
请注意,您应该清除浮动,在标题后使用clear: both
设置元素样式,或者将列表和标题放在overflow
不同于visible
的包装中。