Question

当我改变我顶部栏上的显示文字的分辨率正在改变有人可以帮我解决吗？

Normaly： http://funedit.com/imgedit/soubory/small_10348459921396544905.jpg?x

更改分辨率或更小的borowser窗口： http://funedit.com/imgedit/soubory/small_19550755301396544822.jpg

我的Html：

<body> 
 <div class="top-panel">
    <div id="center"> <a class="top-button" href="#"></a>
       <span class="text">Prave hraje <b>5000</b> hracov na <b>150</b> serveroch!</span>
       <span class="panel">Registruj sa zdarma nebo</span>
        <input type="text">
        <input type="text">
        <input type="image" id="login-button" src="images/login_button.png" alt="Submit">
        <div class="warningimg"></div><div class="warning"> NIGHT CUP 2014 - Sledujte priamy prenos! </div>
       <div class="main"> 
        <div class="logobg">
        <a class="logo" href="#"></a>
          <input class="searchinput" type="text">
          <input class="searchsubmit" type="image">
        <div class="news"></div>
       </div>
    </div>
 </div>
 </div>
 </body>

我的CSS：

body {
    background-image:url('images/background.png');
    background-repeat: no-repeat;
    background-color:#cccccc;
    background-size 100%;
    margin: 0 auto;
    font-family: Arial;
    font-size: 13px;
    position: relative;
    background-position: 50% 0;
    background-attachment: fixed;
}
#center {
    width: 1030px;
    margin: 0 auto;
    /*display: inline-block; */
}
.top-panel {
    background-image: url("images/top_panel.png");
    background-repeat: repeat-x;
    background-position: center;
    height: 43px;
    padding-top:5px;
    display: block;
}
a.top-button {
    background-image: url("images/top_button.png");
    height: 37px;
    width: 141px;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: 20px;
}
.text {
    color: #9c9c9c;
    padding: 0px 10px;
}
.panel {
    color: #6ab1ed;
    padding: 0px 390px;
}
input{
    vertical-align:top;
    display: inline-block;
    height: 21px;
    width: 97px;
    line-height: 25px;
    text-align: center;
    position: relative; left: 550px; top: 4px;
}
span{
    position: absolute;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    text-align: center;    
}
span b{
    font-weight:bold;
}
#login-button{
    /*background-image: url("images/login_button.png");   uz je to v HTML*/
    height: 27px;
    width: 81px;
    line-height: 27px;
    display: inline-block;
    position: relative; left: 550px; top: 4px; 
}

如果有人想在这里看到LIVE的网站：funedit.com/andurit/new /

谢谢大家阅读：）

Answer 1

快速修复将是：

.panel {
    color: #6AB1ED;
    line-height: 1;
    padding: 0 390px;
    width: 150px;
}

Answer 2

span {line-height: 35px}是大线间距的原因;并且缺少white-space: nowrap;就是为什么它会分成几行。然而，主要的问题是，当调整大小时，根本没有足够的空间来容纳所有这些东西。这是由.panel左右两侧的大量填充造成的。您应该尝试通过浮动div或文本对齐来安排导航项，而不是使用填充来定位项目。

Answer 3

将最小宽度设置为：

.panel {
    color: #6ab1ed;
    padding: 0px 390px;
    min-width: 160px;
}

Fiddle

Answer 4

.panel {
    color: #6AB1ED;
    padding: 0 350px;
    width: 200px;
}

Answer 5

U可以决定不同窗口大小的字体大小。实际上问题是当你调整大小的文本大小保持相同并因此溢出因此你可以根据你的需要改变font-size：参数以下。这也适用于手机屏幕。

@media all and (min-width: 400px) {
    .panel {
        font-size: 8px;
    }
}
@media all and (min-width: 600px) {
    .panel {
        font-size: 16px;
    }
}

或者

你可以使用整个页面的jquery resize函数来引用这个auto resize text (font size) when resizing window?

OR

直接使用内置的jQuery插件，如FitText（http://fittextjs.com/）。它会自动调整文本大小以适合父元素的宽度。

另一个具有相同目标的jQuery插件是BigText（http://www.zachleat.com/web/bigtext-makes-text-big/）。

DEMO bigtext

<div id="bigtext" style="width: 300px">
    <div>The elusive</div>
    <div>BIGTEXT</div>
    <div>plugin exclusively</div>
    <div>captured on film</div>
</div>

$('#bigtext').bigtext();

正如你所看到的，你只需要调用一个小函数就可以完全实现在那里的网站上，它只是很小的片段，有很多用途。

CSS - 当分辨率发生变化时，文本正在从条形移动

5 个答案: