Question

我有一个像大盒子一样的div和一个叫做“Kalkulatory macierzowe”的标题。但是当我将鼠标悬停在上方菜单中的最后一个按钮（“Sciągnij”）时，标题的名称会向右移动一个div。我怎么解决它？

HTML

<div id = "menu">
<ul>
<li><a href = "index.php">Główna</a>

<li><a href = "#"> Algebra Liniowa </a>
<ul>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
</ul><!-- end of the inner ul-->
</li><!-- end of the main li-->


<li><a href = "#"> Matematyka Dyskretna </a>
<ul>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
</ul><!-- end of the inner ul-->
</li><!-- end of the main li-->

<li><a href = "#"> Kalkulatory </a>
<ul>
<li><a href = "matrix.php">Kalkulatory macierzowe</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
</ul><!-- end of the inner ul-->
</li><!-- end of the main li-->

<li><a href = "#" id = "szukaj">Sciągnij</a>
<ul>
    <li><a href = "#"></a></li>
</ul>
</li><!-- end of the main li-->
</ul>
</div>

<div id = "box">    
<div class = "table" id = "table">
<div id = "header">Kalkulatory macierzowe</div>

</div>
</div>

CSS

#menu{  
margin:auto;
margin-top:160px;
width:1070px;
min-width:1070px;
height:40px;
padding:0px;
border-radius:8px 8px 0px 0px;
box-shadow:0px 0px 3px 1px #FFFFFF;
-moz-box-shadow:0px 0px 3px 1px #FFFFFF;
-webkit-box-shadow:0px 0px 3px 1px #FFFFFF;
text-shadow:1px 1px 2px black;
border-bottom:1px solid rgba(255,255,255,0.8);
background:url('images/menu.jpg');
}
#menu ul{
margin:0px;
padding:0;
line-height:30px;
}
#menu li{
margin:4.2px;
padding:0;
list-style:none;
position:relative;
float:left;
width:205px;    
}
#menu ul li a{
text-align:center;
font-family:Arial,Verdana, san-serif;
font-size:14px;
text-decoration:none;
height:41px;
width:100%;
display:block;
color:white;
margin:0;
padding:0;
}
#menu ul li:hover{
margin-top:-1px;    
z-index:70;
}
#menu ul ul{
position:absolute;
visibility:hidden;
line-height:40px;
top:40px;
}
#menu ul li:hover ul{
visibility:visible;
background:rgb(14,43,102);
width:205px;
}
#menu ul li:hover ul li{
border:1px inset black;
margin:0px -1px;    
}

#menu ul li:hover ul li a:hover{
background-color:rgb(0,43,153);
}

#header{
height:25px;
max-height:25px;
text-align:left;
font-size:16px;
font-family:Georgia, serif;
background-color:rgb(32,74,109);
color:rgb(255,255,255);
border-bottom:2px inset rgb(0,0,0);
}

Answer 1

将此添加到您的CSS ...

#table {
width: 100%;
display: inline-block;
}

这将有助于您的文字始终处于同一位置。

Css div文本移动

1 个答案: