Question

我对整个网络制作世界都很陌生我的下拉菜单有问题。下拉菜单中的框具有不同的大小，具体取决于其中的单词。

无论如何，我可以把这些盒子做成与最大盒子一样大小并对齐左边的单词吗？

HTML

 <div id="navigation" class="radius">  


<ul>
            <li><a href="index.html"><strong>Home</strong> </a></li>
            <li><a href="Graphics Work.html">Graphics and Photography</a>
            <ul>
                    <li><a href="#">Landscapes</a></li> 
                    <li><a href="#">Special FX</a></li> 
                    <li><a href="#">Advert Shots</a></li>

            </ul>  
            </li>                   
            <li><a href="Film Work.html">Film Work</a></li>
            <li><a href="#Contactus">Contact Me </a></li>
            <li><a href="#About Me">About Me </a></li>

         </ul>
        </div>

CSS

    #navigation {Width:100%; height:60px; background-color:#333;} 

#navigation ul{font-family: "Capitals", "Times", "Lucida Grande", "Lucida     Sans Unicode", "Lucida Sans", "DejaVu Sans", "Verdana", "sans-serif"; display:     inline-block;  
padding:10px; margin-left:5px; margin-top:5px; list-style-type:none; }

#navigation ul li {float:left; display:block;}

#navigation ul li ul {display:none;}

#navigation ul li ul li {display:block; float:none; padding-bottom:6px;     margin-left:55px;}

#navigation ul li ul li a {text-align:left; z-index:99; margin:auto;}

#navigation ul ul {visibility:hidden; }

#navigation ul li a{background:#333; color: #fff; padding:8px 69px;     position:relative; text-decoration:none; }

#navigation ul li:hover ul {display:block; visibility:visible; margin-    top:20px;  }

#navigation ul li a:hover{text-decoration:underline; color:#1B76AE;}

Answer 1

你有一些问题。我修复了你的CSS并应用了一些新的CSS。这是工作片段

*{
    box-sizing: border-box;
}
#navigation {
     Width: 100%;
     background-color: #333;
 }
 #navigation > ul {
     font-family: "Capitals", "Times", "Lucida Grande", "Lucida     Sans Unicode", "Lucida Sans", "DejaVu Sans", "Verdana", "sans-serif";
     display: block;
     padding: 10px;
     margin-left: 5px;
     margin-top: 5px;
     list-style-type: none;
 }
#navigation > ul:after{
    clear:both;
    content:"";
    display: block;
}
 #navigation > ul > li {
     position:relative;
     float: left;
 }

 #navigation ul > li > a {
     display:block;
     background: #333;
     color: #fff;
     padding: 8px 30px;
     position: relative;
     text-decoration: none;
 }
 #navigation > ul > li > ul {
     display: none;
     position:absolute;
     left:0;
     width:100%;
     list-style: none;
     padding: 0;
 }
 #navigation > ul > li > ul > li {
     display: block;
     float: none;
    position:relative;
     width:100%;
 }
 #navigation > ul > li > ul > li > a {
     text-align: left;
     z-index: 99;
     margin: auto;
     display:block;
 }

 #navigation > ul > li:hover > ul {
     display: block;
 }
 #navigation > ul > li > a:hover {
     text-decoration: underline;
     color: #1B76AE;
 }

<div id="navigation" class="radius">  
         <ul>
            <li><a href="index.html"><strong>Home</strong> </a></li>
            <li><a href="Graphics Work.html">Graphics and Photography</a>
            <ul>
                    <li><a href="#">Landscapes</a></li> 
                    <li><a href="#">Special FX</a></li> 
                    <li><a href="#">Advert Shots</a></li>

            </ul>  
            </li>                   
            <li><a href="Film Work.html">Film Work</a></li>
            <li><a href="#Contactus">Contact Me </a></li>
            <li><a href="#About Me">About Me </a></li>

         </ul>
        </div>

Answer 2

在CSS中使用宽度属性。出于本示例的目的，我使用了内联样式。您最好使用单独的样式表。

<select style="width: 10%;" >
<option>Some content</option>
<option>Some more content </option>
<option>Some more content </option>
<option>Some more content </option>
<option>Some more content </option>
<option>Some more content </option>
</select>

下拉菜单框大小不同

2 个答案: