我已經遍尋搜索這個網站,找不到解決我的問題的方法。首先,這是我的問題的一個形象。 (div與「sssss」應該垂直擴展)。所以div的內容在碰到邊界時應該到達下一行。任何建議非常感謝。Div不會隨着內容擴展
這裏是我的代碼。
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<LINK rel=StyleSheet href="styles/StyleSheet.css" type="text/css" media=screen>
</head>
<body>
<form id="Form1">
<div id="header">
<div id="header-center">
<div id="logo">Logo</div>
<div id="search-user">
<form action="" id="SearchUser">
Search User: <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>
</form>
</div>
</div>
<div id="nav-menu">
<ul>
<li><a href="#">Account</a></li>
<li><a href="#">Burndown Chart</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Extra</a></li>
<li><a href="#">Extra</a></li>
</ul>
</div>
</div>
<div id="wrapper">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</form>
</body>
</html>
CSS
html, body
{
padding: 0px;
margin: 0px;
text-align: center;
background-color: #f3f4f9;
font-family: Verdana;
border: 0px;
}
#header
{
width: 100%;
background-color: #0066CC;
}
#header-center
{
margin: 0 auto;
width: 800px;
height: 80px;
}
#logo
{
float: left;
margin-top: 13px;
height: 50px;
font-size: 40px;
color: White;
font-weight: bold;
}
#search-user
{
float: right;
color: White;
font-size: 11px;
font-weight: bold;
margin-top: 25px;
}
#nav-menu
{
width: 100%;
margin: 0 auto;
border-top: 1px solid #003366;
clear: both;
}
#nav-menu ul
{
list-style-type:none;
margin:0;
padding:0;
height: 48px;
background-image: url(../images/menu-ul-bg.png);
}
#nav-menu ul li
{
display:inline;
line-height: 50px;
}
#nav-menu ul li a
{
padding: 0px 40px 0px 40px;
text-decoration: none;
color: Black;
font-size: 14px;
}
#nav-menu ul li a:hover
{
color: White;
}
#wrapper
{
margin: 0 auto;
width: 200px;
border: 1px solid black;
}
這可以幫助你https://developer.mozilla.org/it/docs/CSS/hyphens。 您很可能不會有超過25個字符的單詞。適當的話將正確分解並向下流動。 – VKen