CSS如何避免元素與css之間的換行符？

div#banner>img { 
 
    float: left; 
 
    background-color: #4b634b; 
 
    height: 265px; 
 
    width: 80%; 
 
} 
 

 
ul { 
 
    float: left; 
 
    background-color: #769976; 
 
    width: 162px; 
 
}

<body> 
 
    <div id="wrapper"> 
 
    <header> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="1.html" class="active">one</a></li> 
 
      <li><a href="2.html">two</a></li> 
 
      <li><a href="3.html">three</a></li> 
 
     </ul> 
 
     </nav> 
 
     <div id="banner"> 
 
     <img src="pic.jpg"> 
 
     </div> 
 
    </header> 
 
    <!--...rest of body and wrapper...--> 
 
    </div> 
 
</body>

你好，我用Google搜索了很多，但沒有得到很好的答案，問題是，我想有在左上角的導航和橫幅連接到它朝右邊框包裝，現在與css的工作，但只有在全屏，在某個點它插入之間插入一個linebreak二，我該如何防止這種情況？感謝您的幫助

來源

2017-02-16 Gotti92

將兩個width值都更改爲總計小於100％的百分比值。

加成後評論：

您可以設置圖像元素width: calc(100% - 162px);這將使整個寬度減去所需要的其他元素

來源

2017-02-16 23:07:03 Johannes

感謝您的回答，我行與畫面改變大小，但包裝必須是162px的大小，我該如何解決這個問題呢？ – Gotti92

請注意除了我的答案 – Johannes

您的問題沒有說清楚了162px，但我認爲，問題是你的元素超過了視口寬度。嘗試使用百分比或動態

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
\t <div id="wrapper"> 
 
\t \t <header> 
 
\t \t \t <nav> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <a class="active" href="1.html">one</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <a href="2.html">two</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <a href="3.html">three</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 
\t \t \t <div id="banner"><img src="pic.jpg"></div> 
 
\t \t \t <p>Content here</p> 
 
\t \t \t <p></p> 
 
\t \t </header> 
 
\t </div> 
 
\t <style> 
 
\t div#banner>img { 
 
\t background-color:#4b634b; 
 
\t height:265px; 
 
\t width: 80%; 
 
\t } 
 

 
\t ul { 
 
\t float:left; 
 
\t background-color: #769976; 
 
\t width:20%x; 
 
\t } 
 
\t #wrapper{ 
 
\t width:100%; 
 
\t } 
 

 

 
\t </style> 
 
</body> 
 
</html>

來源

2017-02-16 23:12:58 Sman

感謝所有幫助很大球員設置的寬度，我試了好東西，因爲有這使得它有點難度

一些其他的事情

像包裝有一個格式太絕對沒有工作

可能是我的錯，因爲我沒有問足夠精確，感謝tho爲g reat和快速幫助

「您可以將圖像元素設置爲寬度：calc（100％ - 162px）;這將使整個寬度減去所需要的其他元素」

是要走的路162px，由於約翰和其他人一樣！

來源

2017-02-16 23:35:58 Gotti92

CSS如何避免元素與css之間的換行符？

回答

相關問題