在bg容器中放置文本

我想將菜單添加到組合背景。但是當我用背後的菜單嵌套背景時，他們不會合作，也不會對齊。例如，當我將其中一個菜單移動到左側時，其他人開始向另一個方向移動。現在我真的試圖解決這個問題，但現在看來，唯一的辦法就是讓我調整它們，直到所有對齊都正確。這就是我今天的問題：在bg容器中放置文本

我怎樣才能使這項工作，而不是一遍又一遍地調整每個菜單？

這裏談到的CSS和HTML代碼

.baked a:hover{text-decoration: none; 
    color: white; 
    text-shadow: 1px 1px 1px blue; 
    }    

.baked { list-style-type: none; 
    float: left; 
    margin-top: 15px; 
    margin-left: -20px; 

    } 

    .baked li ul {position: absolute; 
      display: none;} 
.baked li{font-family: Berlin Sans FB; 
     } 



.baked li:hover ul { background: silver; 
       display: block; 
       box-shadow: inset 0px 12px 15px -2px purple; 
       list-style-type: none; 
       width: 400px; 
       height: 100px; 
       } 
.baked li>a{color: white; 
     font-size: 12px} 

<ul class="baked"> 
    <li> 
    <a href="PointerIndex.html">PointerIndex</a> 
    <ul> 
    <li><a href="Reflections.html">Reflections</a></li> 
    <li><a href="Practicing.html">Practicing</a></li> 
    <li><a href="NewsFeed.html">NewsFeed</a></li> 
    <li><a href="ExArt.html">Explanatory Art</a></li> 
    <li><a href="TopAi.html">Top AI</a></li> 
    </ul> 
</li> 
</ul>

請注意，我有一個總的這些菜單的9，所有這些都包含在以下的div

div.Console{background: gray; 
       display: block; 
       box-shadow: 0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249; 
       border-radius: 24pt; 

       list-style-type: none; 
       width: 300px; 
       margin-top: -100px; 
       margin-left: 30px; 
       height: 50px; 
       }

來源

2012-02-19 Johnny Hankgard

我很困惑與您提供的信息。我修改了子菜單項右對齊的代碼。嘗試一下。請說明更多信息。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title><br /> 
<style type="text/css"> 

    .baked a:hover{text-decoration: none; 
    color: white; 
    text-shadow: 1px 1px 1px blue; 
    }    

.baked { list-style-type: none; 
    float: left; 
    margin-top: 15px; 
    margin-left: -20px; 

    } 

    .baked li ul {position: absolute; 
      display: none;} 
.baked li{font-family: Berlin Sans FB; 
     } 



.baked li:hover ul { background: silver; 
       display: block; 
text-align:right; padding-right:10px; 
       box-shadow: inset 0px 12px 15px -2px purple; 
       list-style-type: none; 
       width: 400px; 
       height: 100px; 
       } 
.baked li a{color: white; 
     font-size: 12px} 

    /* div.Console{background: gray; 
       display: block; 
       box-shadow: 0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249; 
       border-radius: 24pt; 

       list-style-type: none; 
       width: 300px; 
       margin-top: -100px; 
       margin-left: 30px; 
       height: 50px; 
       } 

       */ 
</style> 
</head> 

<body bgcolor="#999999"> 

<ul class="baked"> 
    <li> 
    <a href="PointerIndex.html">PointerIndex</a> 
    <ul> 
    <li><a href="Reflections.html">Reflections</a></li> 
    <li><a href="Practicing.html">Practicing</a></li> 
    <li><a href="NewsFeed.html">NewsFeed</a></li> 
    <li><a href="ExArt.html">Explanatory Art</a></li> 
    <li><a href="TopAi.html">Top AI</a></li> 
    </ul> 
</li> 
</ul> 


</body> 
</html>

來源

2012-02-24 10:03:32

在bg容器中放置文本

回答

相關問題