CSS - 當分辨率發生變化時，文本正在從欄中移動

當我在頂部欄上更改我的顯示文本的分辨率時有人能幫我解決它嗎？CSS - 當分辨率發生變化時，文本正在從欄中移動

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/

感謝大家閱讀本:)

來源

2014-04-03 user3009924

我正在談論藍色文本「Registruj sa zdarma nebo」 – user3009924

使用BIGTEXT內置插件請參閱下面我的帖子以獲取更多方法。 –

這裏有很多答案似乎對你有所幫助，這裏的規則是至少提供那些幫助你解決問題的方法，並接受（通過點擊打勾）你發現最好的答案。你會在這裏看到更多關於stackoverflow的信息：http://stackoverflow.com/about –

速戰速決將是：

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

來源

2014-04-03 17:18:12 dippas

酷男人真的在工作，你能解釋一下爲什麼嗎？：P因爲我真的不知道：P 順便說一句，如果你打開我的網站在移動設備上做了一些狗屎右上角，不知道如何解決它？它不是在個人電腦borowser – user3009924

，因爲你正在使用一個巨大的填充（這是不好的，你應該考慮@約翰託賓的答案 - http://stackoverflow.com/a/22844652/3448527 - 並安排您的導航項目浮動的div或列表項）因此，您已經定義跨度與顯示：內聯塊，最好給它一個寬度，否則它將是100％，並且行高度：1它是獲得行 - 因爲您在span span line-height：35px中定義了默認高度。 – dippas

我查了一下，問題似乎是身體。嘗試改變：margin：0 auto;保證金：0;並刪除最小寬度。 – dippas

span {line-height: 35px}是行間距較大的原因;並且缺少white-space: nowrap;就是爲什麼它會突破線路。但是，主要的問題是，當調整大小時，根本沒有足夠的空間容納所有這些東西。這是由於.panel左側和右側的巨大填充。您應該嘗試通過浮動div或文本對齊排列導航項，而不是使用填充來定位項目。

來源

2014-04-03 17:19:19 John

設置最小寬度是這樣的：

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

Fiddle

來源

2014-04-03 17:20:54 Senju

感謝您的回答:) – user3009924

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

來源

2014-04-03 17:20:56 frshjb373

U可以爲不同的窗口決定的字體大小size.Actually問題是當u調整文字的大小，剩餘相同因此溢出，因此你可以根據你的需要改變font-size：參數。這也適用於移動屏幕。

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

或者

u可以使用jQuery的調整對於整個頁面的功能是指這個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();

如u可以看到ü只需要調用一個小功能全面落實在他們的網站它只是小片段也有很多使用的是的。

來源

2014-04-03 17:27:49

CSS - 當分辨率發生變化時，文本正在從欄中移動

回答

相關問題