ul / li下拉菜单不与左侧对齐？
[英]ul/li Drop Down not aligning to the left?
问题描述
i'm trying to create a drop down for my settings page tab, now it works fine with no issues when opened on a desktop but when opened on a mobile/tablet or shrinking the browser size my tabs menu is all "crushed" in a sense. 
我正在尝试为我的“设置”页面标签创建下拉菜单，现在在台式机上打开时可以正常使用，没有问题，但是在移动/平板电脑上打开或缩小浏览器大小时，我的标签菜单在“感。 It looks like it's dropping down to the right when maybe if it was dropping down to the left it might fix it. 看起来好像是在向右下拉，如果它向左下拉则可能会修复它。 No idea anyway, so I wondered if anyone knows how to fix this issue? 无论如何都不知道，所以我想知道是否有人知道如何解决这个问题？
CURRENT DESKTOP EXAMPLE 当前桌面示例
CURRENT MOBILE EXAMPLE 当前的移动示例
THE WAY I WANT IT TO LOOK 我想要的方式
HTML 的HTML
<body>
<div id="header">
<div id="headerTitle">
<p>Project Archive</p>
</div>
<div id="nav">
<ul>
<li class="navOn"><a class="active" href="Home.php">Home</a></li>
<li><a href="Home.php">All</a></li>
<li><a href="Home.php">Categories</a></li>
<li><a href="Home.php">Quote</a></li>
<li><a href="Home.php">Support</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Settings</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</div>
</div>
<div id="search">
<p>Search Your Documents...</p>
<form action="Home.php" method="post">
<input type="text" name="search" placeholder="search" class="tbSearch">
</form>
</div>
<div id="documents">
<div id="docGrid">
<div id="docLeft">
<div id="docName">
<p>Doc Name</p>
</div>
<div id="docDescription">
<p>This is the area where the description of the document will be displayed.</p>
</div>
<div id="docOpen">
<table class="btnOpen">
<tr>
<td>OPEN</td>
</tr>
</table>
</div>
</div>
<div id="docRight">
<div id="docName">
<p>Doc Name</p>
</div>
<div id="docDescription">
<p>This is the area where the description of the document will be displayed.</p>
</div>
<div id="docOpen">
<table class="btnOpen">
<tr>
<td>OPEN</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="docGrid">
<div id="docLeft">
<div id="docName">
<p>Doc Name</p>
</div>
<div id="docDescription">
<p>This is the area where the description of the document will be displayed.</p>
</div>
<div id="docOpen">
<table class="btnOpen">
<tr>
<td>OPEN</td>
</tr>
</table>
</div>
</div>
<div id="docRight">
<div id="docName">
<p>Doc Name</p>
</div>
<div id="docDescription">
<p>This is the area where the description of the document will be displayed.</p>
</div>
<div id="docOpen">
<table class="btnOpen">
<tr>
<td>OPEN</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="docGrid">
<div id="docLeft">
<div id="docName">
<p>Doc Name</p>
</div>
<div id="docDescription">
<p>This is the area where the description of the document will be displayed.</p>
</div>
<div id="docOpen">
<table class="btnOpen">
<tr>
<td>OPEN</td>
</tr>
</table>
</div>
</div>
<div id="docRight">
<div id="docName">
<p>Doc Name</p>
</div>
<div id="docDescription">
<p>This is the area where the description of the document will be displayed.</p>
</div>
<div id="docOpen">
<table class="btnOpen">
<tr>
<td>OPEN</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="docGrid">
<div id="docLeft">
<div id="docName">
<p>Doc Name</p>
</div>
<div id="docDescription">
<p>This is the area where the description of the document will be displayed.</p>
</div>
<div id="docOpen">
<table class="btnOpen">
<tr>
<td>OPEN</td>
</tr>
</table>
</div>
</div>
<div id="docRight">
<div id="docName">
<p>Doc Name</p>
</div>
<div id="docDescription">
<p>This is the area where the description of the document will be displayed.</p>
</div>
<div id="docOpen">
<table class="btnOpen">
<tr>
<td>OPEN</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
CSS 的CSS
@charset "utf-8";
body{
background:#E8E8E8;
overflow-x:hidden;
}
#header{
width:100%;
height:80px;
font-weight:bold;
}
#search{
height:115px;
background-color:#4C66A4;
color:#FFF;
text-align:center;
font-size:18px;
font-weight:bold;
padding-top:10px;
}
#navTop{
height:5px;
margin-bottom:20px;
background-color:#4C66A4;
}
#documents{
width:100%;
height:100%;
}
#docGrid{
height:225px;
margin-left:10%;
margin-right:10%;
margin-top:20px;
margin-bottom:20px;
}
#docLeft{
float:left;
height:222px;
width:45%;
background-color:#FFF;
border-bottom:3px solid #BEBEBE;
}
#docRight{
float:right;
height:222px;
width:45%;
background-color:#FFF;
border-bottom:3px solid #BEBEBE;
}
#docName{
text-align:center;
margin-top:10px;
margin-bottom:10px;
font-size:16px;
font-weight:bold;
}
#docDescription{
text-align:center;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
height:110px;
}
#docOpen{
text-align:center;
margin-left:17.5%;
margin-right:17.5%;
margin-top:10px;
margin-bottom:10px;
}
#headerTitle{
float:left;
font-weight:bold;
font-size:20px;
text-align:center;
width:25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-size:12px;
height:80px;
}
.navOn{
border-top:3px solid #4C66A4;
height:47px;
padding-top:27px;
}
li {
float: left;
width:12%;
height:50px;
padding-top:30px;
text-align:center;
}
a:visited {
text-decoration: none;
color:#000;
}
li a, .dropbtn {
display: inline-block;
color: #000;
text-align: center;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.btnOpen{
text-align:center;
vertical-align:middle;
height:30px;
width:100%;
border-radius:5px;
background-color:#4C66A4;
color:#FFF;
font-size:15px;
font-weight:bold;
}
.headerTitle{
font-size:20px;
text-align:center;
vertical-align:middle;
font-weight:bold;
}
.tbSearch{
border: 1px solid #848484;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
outline:0;
padding-left:10px;
padding-right:10px;
margin-top:0;
margin-bottom:0;
margin-left:12.5%;
margin-right:12.5%;
width:75%;
height:25px;
font-size:15px;
}
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
}
EDIT 编辑
Example to the comment supplied to Sagar Kodte: 提供给Sagar Kodte的评论示例：
3 个解决方案
解决方案1
1 2016-06-28 11:25:30
Try using flexbox. 尝试使用flexbox。 I also added 0px margin to html and body element. 我还为html和body元素添加了0px的边距。 If you feel better without it, feel free to delete 如果没有它感觉更好，请随时删除
@charset "utf-8"; html, body{ margin: 0; padding: 0; } body{ background:#E8E8E8; overflow-x: hidden; } #header{ width:100%; height:80px; font-weight:bold; } #search{ height:115px; background-color:#4C66A4; color:#FFF; text-align:center; font-size:18px; font-weight:bold; padding-top:10px; } #navTop{ height:5px; margin-bottom:20px; background-color:#4C66A4; } #documents{ width:100%; height:100%; } #docGrid{ height:225px; margin-left:10%; margin-right:10%; margin-top:20px; margin-bottom:20px; } #docLeft{ float:left; height:222px; width:45%; background-color:#FFF; border-bottom:3px solid #BEBEBE; } #docRight{ float:right; height:222px; width:45%; background-color:#FFF; border-bottom:3px solid #BEBEBE; } #docName{ text-align:center; margin-top:10px; margin-bottom:10px; font-size:16px; font-weight:bold; } #docDescription{ text-align:center; margin-top:10px; margin-bottom:10px; margin-left:5px; margin-right:5px; height:110px; } #docOpen{ text-align:center; margin-left:17.5%; margin-right:17.5%; margin-top:10px; margin-bottom:10px; } #headerTitle{ float:left; font-weight:bold; font-size:20px; text-align:center; width:25%; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; font-size:12px; height:80px; display: flex; } .navOn{ border-top:3px solid #4C66A4; height:47px; padding-top:27px; } li { height:50px; padding-top:30px; text-align:center; display: block; flex: 1; } a:visited { text-decoration: none; color:#000; } li a, .dropbtn { display: inline-block; color: #000; text-align: center; text-decoration: none; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .btnOpen{ text-align:center; vertical-align:middle; height:30px; width:100%; border-radius:5px; background-color:#4C66A4; color:#FFF; font-size:15px; font-weight:bold; } .headerTitle{ font-size:20px; text-align:center; vertical-align:middle; font-weight:bold; } .tbSearch{ border: 1px solid #848484; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; outline:0; padding-left:10px; padding-right:10px; margin-top:0; margin-bottom:0; margin-left:12.5%; margin-right:12.5%; width:75%; height:25px; font-size:15px; } @media only screen and (min-width: 769px) { #header{ width: 80%; margin-left: 5%; } }
<body> <div id="header"> <div id="headerTitle"> <p>Project Archive</p> </div> <div id="nav"> <ul> <li class="navOn"><a class="active" href="Home.php">Home</a></li> <li><a href="Home.php">All</a></li> <li><a href="Home.php">Categories</a></li> <li><a href="Home.php">Quote</a></li> <li><a href="Home.php">Support</a></li> <li class="dropdown"> <a href="#" class="dropbtn">Settings</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> </div> </div> <div id="search"> <p>Search Your Documents...</p> <form action="Home.php" method="post"> <input type="text" name="search" placeholder="search" class="tbSearch"> </form> </div> <div id="documents"> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> </body>
解决方案2
1 已采纳 2016-06-28 11:27:26
Hope it helps you. 希望对您有帮助。 EDITED 已编辑
@charset "utf-8"; body{ background:#E8E8E8; overflow-x:hidden; } #header{ width:100%; height:80px; font-weight:bold; } #search{ height:115px; background-color:#4C66A4; color:#FFF; text-align:center; font-size:18px; font-weight:bold; padding-top:10px; } #navTop{ height:5px; margin-bottom:20px; background-color:#4C66A4; } #documents{ width:100%; height:100%; } #docGrid{ height:225px; margin-left:10%; margin-right:10%; margin-top:20px; margin-bottom:20px; } #docLeft{ float:left; height:222px; width:45%; background-color:#FFF; border-bottom:3px solid #BEBEBE; } #docRight{ float:right; height:222px; width:45%; background-color:#FFF; border-bottom:3px solid #BEBEBE; } #docName{ text-align:center; margin-top:10px; margin-bottom:10px; font-size:16px; font-weight:bold; } #docDescription{ text-align:center; margin-top:10px; margin-bottom:10px; margin-left:5px; margin-right:5px; height:110px; } #docOpen{ text-align:center; margin-left:17.5%; margin-right:17.5%; margin-top:10px; margin-bottom:10px; } #headerTitle{ float:left; font-weight:bold; font-size:20px; text-align:center; width:25%; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; font-size:11px; height:80px; } .navOn{ border-top:3px solid #4C66A4; height:47px; padding-top:27px; } li { float: left; width:16%; height:50px; padding-top:30px; text-align:center; } a:visited { text-decoration: none; color:#000; } li a, .dropbtn { display: inline-block; color: #000; text-align: center; text-decoration: none; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .btnOpen{ text-align:center; vertical-align:middle; height:30px; width:100%; border-radius:5px; background-color:#4C66A4; color:#FFF; font-size:15px; font-weight:bold; } .headerTitle{ font-size:20px; text-align:center; vertical-align:middle; font-weight:bold; } .tbSearch{ border: 1px solid #848484; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; outline:0; padding-left:10px; padding-right:10px; margin-top:0; margin-bottom:0; margin-left:12.5%; margin-right:12.5%; width:75%; height:25px; font-size:15px; } @media only screen and (max-width: 480px) { li a { font-size:8px;} } @media only screen and (max-width: 320px) { li a { font-size:5px; !important} }
<div id="header"> <div id="headerTitle"> <p>Project Archive</p> </div> <div id="nav"> <ul> <li class="navOn"><a class="active" href="Home.php">Home</a></li> <li><a href="Home.php">All</a></li> <li><a href="Home.php">Categories</a></li> <li><a href="Home.php">Quote</a></li> <li><a href="Home.php">Support</a></li> <li class="dropdown"> <a href="#" class="dropbtn">Settings</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> </div> </div> <div id="search"> <p>Search Your Documents...</p> <form action="Home.php" method="post"> <input type="text" name="search" placeholder="search" class="tbSearch"> </form> </div> <div id="documents"> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div>
解决方案3
0 2016-06-28 11:20:06
Hope it is what you want. 希望这就是你想要的。
@charset "utf-8"; body{ background:#E8E8E8; overflow-x:hidden; } #header{ width:100%; min-height:80px; font-weight:bold; overflow:hidden; } #search{ height:115px; background-color:#4C66A4; color:#FFF; text-align:center; font-size:18px; font-weight:bold; padding-top:10px; } #navTop{ height:5px; margin-bottom:20px; background-color:#4C66A4; } #documents{ width:100%; height:100%; } #docGrid{ height:225px; margin-left:10%; margin-right:10%; margin-top:20px; margin-bottom:20px; } #docLeft{ float:left; height:222px; width:45%; background-color:#FFF; border-bottom:3px solid #BEBEBE; } #docRight{ float:right; height:222px; width:45%; background-color:#FFF; border-bottom:3px solid #BEBEBE; } #docName{ text-align:center; margin-top:10px; margin-bottom:10px; font-size:16px; font-weight:bold; } #docDescription{ text-align:center; margin-top:10px; margin-bottom:10px; margin-left:5px; margin-right:5px; height:110px; } #docOpen{ text-align:center; margin-left:17.5%; margin-right:17.5%; margin-top:10px; margin-bottom:10px; } #headerTitle{ float:left; font-weight:bold; font-size:20px; text-align:center; width:25%; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; font-size:12px; min-height:80px; } .navOn{ border-top:3px solid #4C66A4; height:47px; padding-top:27px; } li { width: 10%; padding:30px 10px 0px 10px; height:50px; padding-top:30px; text-align:center; float:left; } a:visited { text-decoration: none; color:#000; } li a, .dropbtn { display: inline-block; color: #000; text-align: center; text-decoration: none; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .btnOpen{ text-align:center; vertical-align:middle; height:30px; width:100%; border-radius:5px; background-color:#4C66A4; color:#FFF; font-size:15px; font-weight:bold; } .headerTitle{ font-size:20px; text-align:center; vertical-align:middle; font-weight:bold; } .tbSearch{ border: 1px solid #848484; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; outline:0; padding-left:10px; padding-right:10px; margin-top:0; margin-bottom:0; margin-left:12.5%; margin-right:12.5%; width:75%; height:25px; font-size:15px; } } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { }
<body> <div id="header"> <div id="headerTitle"> <p>Project Archive</p> </div> <div id="nav"> <ul> <li class="navOn"><a class="active" href="Home.php">Home</a></li> <li><a href="Home.php">All</a></li> <li><a href="Home.php">Categories</a></li> <li><a href="Home.php">Quote</a></li> <li><a href="Home.php">Support</a></li> <li class="dropdown"> <a href="#" class="dropbtn">Settings</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> </div> </div> <div id="search"> <p>Search Your Documents...</p> <form action="Home.php" method="post"> <input type="text" name="search" placeholder="search" class="tbSearch"> </form> </div> <div id="documents"> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> <div id="docGrid"> <div id="docLeft"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> <div id="docRight"> <div id="docName"> <p>Doc Name</p> </div> <div id="docDescription"> <p>This is the area where the description of the document will be displayed.</p> </div> <div id="docOpen"> <table class="btnOpen"> <tr> <td>OPEN</td> </tr> </table> </div> </div> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS下拉边框仅在'ul li ul li：hover a'上 - CSS Drop Down Border Only On 'ul li ul li:hover a'
定心 <ul><li> 水平下拉菜单 - centering <ul> <li> horizontal drop down menu
li不在ul的中心对齐 - li not aligning in center to ul
对齐ul li元素 - aligning ul li elements
CSS下拉菜单：nav ul ul li移至右侧 - CSS Drop Down Menu : nav ul ul li Moved to Right
仅CSS下拉菜单不使用UL / LI - CSS only drop-down menu not using UL/LI
Z-Index在下拉菜单中不适用于UL LI - Z-Index not working on UL LI in drop-down
在里面创建没有ul的下拉菜单 - Create drop down menu without ul inside li
无法确定下拉菜单的ul和li元素 - Trouble targeting ul and li elements for drop down menu
UL LI下拉菜单将其他html内容向下推 - UL LI Drop Down Menus pushes other html content downward
相关标签