Question

网页是这样的：http://www.peliculadicto.tk/ 每当我调整窗口大小时，颜色灰色条内的文本位置：固定在上方，移动到两侧。它永远不会居中。我该如何防止这种情况？

HTML

<div class="headbar">
    <h1 id="logo">
        <a href="url" title="Ver peliculas de terror, de miedo, infantiles">Películas buenas</a>
    </h1>
    <div id="menu">
        <ul>
            <li><a href="url">Inicio</a></li>
            <li><a href="url" class="drop">Peliculas</a></li>   
            <li><a href="url" class="drop">Estrenos</a></li>            
            <li><a href="url">Ranking</a></li><li><a href="url">Proximamente</a></li>
            <li><a href="url">Más vistas</a></li>
        </ul>

        (search) <div id="uwpqsf_idsr"><form id="uwpqsffrom_641" method="get" action="url"><div class="uform_titlesr"></div><input type="hidden" name="unonce" value="4b52cced4e"><input type="hidden" name="uformid" value="641"><input type="hidden" name="s" value="uwpsfsearchtrg"><div class="uwpqsf_classsr"><input id="uwpqsf_id_keysr" type="text" name="skeyword" class="uwpqsftext" placeholder="Busca por título, actor, director, género..." value=""></div></form></div>

    </div>
</div>

CSS

.uwpqsf_classsr { 
    margin-bottom: 1px;
    clear: both;
    position: absolute;
    bottom: 2.5px;
    left: 57px; 
}

.headbar {
    position:fixed;
    top: 0px;
    left: 0px;
    height: 42px;
    width: 100%;
    background-color: #9B9595;
    background-image: -moz-linear-gradient(#B6AAAA,#000000);
    background-image: -webkit-gradient(linear,0% 0,0% 100%,from(#B6AAAA),to(#000000));
    background-image: -webkit-linear-gradient(rgb(177, 185, 185),rgb(73, 68, 73));
    background-image: -o-linear-gradient(#B6AAAA,#000000);
    border-bottom: 1px solid #A29A9A;
    z-index: 3000;
    opacity: 0.65;
}

#menu {
    position: absolute;
    min-width: 700px;
    left: 221px;
}

#menu>ul>li { 
    float:left;
    position:relative;
    height:27px;
    left:370px;
}

Answer 1

这是

#menu {
  left: 221px;
}

正在这样做。

Answer 2

由于left:221px中的#menu而发生这种情况。您可以使用float:right来修复右侧的div。

Answer 3

这是因为左边设置为固定的px。当窗口调整大小时，空间看起来更大，但实际上空间保持不变，并且窗口变小。尝试使用百分比。

Answer 4

好吧，也许我没有解释自己。但是，我已经修好了，花了很长时间才搞清楚。我和任何想要比较的人的时间：

<强> CSS

.headbar {
position:fixed;
width: 100%;
height: 42px;
margin: 0px auto;
background-color: #9B9595;
background-image: -moz-linear-gradient(#B6AAAA,#000000);
background-image: -webkit-gradient(linear,0% 0,0% 100%,from(#B6AAAA),to(#000000));
background-image: -webkit-linear-gradient(rgb(177, 185, 185),rgb(73, 68, 73));
background-image: -o-linear-gradient(#B6AAAA,#000000);
border-bottom: 1px solid #A29A9A;
z-index: 3000;
opacity: 0.65;
}

#menu {
margin: 0px 332px 0px auto;
width: 48%;
position: relative;
right: 178px;
}

#menu>ul>li {
float:left;
height:27px;
margin-top:13px;
}

.uwpqsf_classsr { 
}

input#uwpqsf_id_keysr {
color: #FFFFFF; 
width:277px;
height:30px; 
padding-left: 32px;
background: rgba(56, 53, 53, 0.12) url(/lupa.png) no-repeat; 
border: 1px solid rgba(0,0,0,0.2);
-webkit-border-radius: 3px; -moz-border-radius: 3px;
}

<强> HTML

<div class="headbar">
                <h1 id="logo">
                    <a href="http://www.peliculadicto.tk" title="Ver peliculas de terror, de miedo, infantiles">Películas buenas</a>
                </h1>
<div id="menu">
<ul>
<li><a href="http://www.peliculadicto.tk">Inicio</a></li>
<li><a href="http://www.peliculadicto.tk/tag/peliculas" class="drop">Peliculas</a></li> 
<li><a href="http://www.peliculadicto.tk/tag/estrenos" class="drop">Estrenos</a></li>           
<li><a href="http://www.peliculadicto.tk/ranking">Ranking</a></li><li><a href="http://www.peliculadicto.tk/archivos/proximamente">Proximamente</a></li>
<li><a href="http://www.peliculadicto.tk/tag/peliculas/?v_sortby=views&amp;v_orderby=desc">Más vistas</a></li>
</ul>
</div>

<div id="uwpqsf_idsr"><form id="uwpqsffrom_641" method="get" action="http://www.peliculadicto.tk/"><div class="uform_titlesr"></div><input type="hidden" name="unonce" value="4b52cced4e"><input type="hidden" name="uformid" value="641"><input type="hidden" name="s" value="uwpsfsearchtrg"><div class="uwpqsf_classsr"><input id="uwpqsf_id_keysr" type="text" name="skeyword" class="uwpqsftext" placeholder="Busca por título, actor, director, género..." value=""></div></form></div>

</div>

当调整窗口大小时，div内的文本向右或向左移动

4 个答案: