任何人都知道如何縮短我的按鈕的寬度？

我正在嘗試重新調整中心/頁面底部附近的5倍按鈕大小。

如何縮短（同時將它們保持在同一位置）按鈕的寬度爲目前的一半？

/* Nav */ 
.nav li { 
    list-style: none; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align: center; 
    Color: White; 
    Border: 3px Solid; 
    border-color: black; 
    font-family: 'Roboto',sans-serif; 
    background-color: #99CCFF; 
    letter-spacing: 1px; 
    margin-bottom: 20px; 

} 

.nav li:hover { 
    background: #117bff; 
    cursor: pointer; 
    transition: background 1s; 
    font-weight: bold; 
}

來源

2015-10-25 Jamie Bohanna

你也可以發佈HTML嗎？ – kfreeman04208

如果您使用.nav類的（P/DIV）標籤，則必須使用 display：inline-block; 該標籤的屬性。 –

只需添加display: inline-block您nav類，並設置爲任何你想要的width。

例如：

.nav { 
    display: inline-block; 
    width: 200px; 
}

EDIT

要居中可以使用相對定位導航菜單，設置left至50％和-50％，以設置的錨點翻譯到元素的中心。

left: 50%; 
transform: translate(-50%,0); 
position: relative;

請注意，我因爲默認情況下的ul填充設置爲零左填充爲40像素。

Updated fiddle

來源

2015-10-25 15:06:53 idoshamun

這很棒..除了它去集中它！如果我這樣做，我該如何保持它的中心？你現在可以看到我的問題.. –

我添加了更多的細節，看看 – idoshamun

試試這個：

.nav li { 
/*your code*/ 
display:inline-block; 
}

來源

2015-10-25 15:11:09

html, body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
html { 
 
    background: url(http://www.desktopwallpaper2.com/photo/508ba1480284c-2306.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
body { 
 
\t font-family: 'Roboto', sans-serif; 
 
\t font-weight: 100; 
 
} 
 

 
.container { 
 
\t margin: 0 auto; 
 
\t max-width: 940px; 
 
\t padding: 0 10px; 
 
} 
 

 

 
/* Header */ 
 
.header { 
 
    height: 800px; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 

 
.header .container { 
 
\t position: relative; 
 
\t top: 200px; 
 
} 
 

 
.header h1 { 
 
\t font-size: 80px; 
 
\t line-height: 100px; 
 
\t margin-top: 0; 
 
\t margin-bottom: 80px; 
 
} 
 

 
@media (min-width:850px) { 
 
\t .header h1 { 
 
\t \t font-size: 120px; 
 
\t } 
 
} 
 

 
.header p { 
 
\t font-weight: 500; 
 
\t letter-spacing: 8px; 
 
\t margin-bottom: 40px; 
 
\t margin-top: 0; 
 
} 
 

 
a { 
 
    \t background-color: Black; 
 
    \t border: 2px solid; 
 
    \t padding: 10px; 
 
    \t font-family: Impact; 
 
    font-weight: normal; 
 
    \t font-size: 20px; 
 
    \t color: white; 
 
    \t letter-spacing: 3px; 
 
} 
 
a:hover { 
 
\t background: #117bff; 
 
\t cursor: pointer; 
 
\t transition: background .5s; 
 
} 
 

 

 
/* Nav */ 
 

 
.nav ul {float: left; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    } 
 
.nav li { 
 
    margin: 0 auto; 
 
    margin-bottom:10px; 
 
\t list-style: none; 
 
\t padding-top: 10px; 
 
    padding-bottom: 10px; 
 
\t text-align: center; 
 
    Color: White; 
 
    Border: 3px Solid; 
 
    border-color: black; 
 
    font-family: 'Roboto',sans-serif; 
 
    background-color: #99CCFF; 
 
    letter-spacing: 1px; 
 

 
    width: 200px; 
 
    
 
    
 
    
 
    
 
} 
 

 
.nav li:hover { 
 
    background: #117bff; 
 
\t cursor: pointer; 
 
\t transition: background 1s; 
 
    font-weight: bold; 
 
} 
 

 
/* Main */ 
 
.main .container { 
 
\t margin: 80px auto; 
 
    color: white; 
 
} 
 

 

 
/* Jumbotron */ 
 
.jumbotron { 
 
\t height: 600px; 
 
\t text-align: right; 
 
} 
 

 
.jumbotron .container { 
 
\t position: relative; 
 
\t top: 220px; 
 
} 
 

 

 
/* Footer */ 
 
.footer { 
 
\t font-size: 14px; 
 
} 
 

 
/* Media Queries */ 
 
@media (max-width: 500px) { 
 
    .header h1 { 
 
    font-size: 50px; 
 
    line-height: 64px; 
 
    } 
 

 
    .main, .jumbotron { 
 
    padding: 0 30px; 
 
    } 
 

 
    .main img { 
 
    width: 100%; 
 
    } 
 
}

<!DOCTYPE html> 
 
    <body> 
 
    <div class="header"> 
 
     <div class="container"> 
 
     <h1> Innovation Cloud </h1> 
 
     <p> Connect Your Ideas Globally </p> 
 
     <a href="www.google.co.uk"> Learn More </a> 
 
     </div> 
 
    </div> 
 

 
    <div class="nav"> 
 
     <div class="container"> 
 
     <ul> 
 
      <li> Register </li> 
 
      <li> Schedule </li> 
 
      <li> Sponsors </li> 
 
      <li> About </li> 
 
      <li> Contact </li> 
 
     </div> 
 
    </div> 
 

 
    <div class="main"> 
 
     <div class="container"> 
 
     
 

 
     <h2>The Innovation Cloud Conference</h2> 
 
     <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p> 
 
     <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p> 
 
     <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p> 
 
     </div> 
 
    </div> 
 

 
    
 
    </body> 
 
</html>

來源

2015-10-25 15:47:12 imGaurav

目標.nav具有以下屬性

.nav { 
    margin: auto; 
    display: block; 
    width: 200px; 
}

，你可能想要刪除.contaienr（你不需要它）。它有一個max-width的960px。

來源

2015-10-25 21:45:23

任何人都知道如何縮短我的按鈕的寬度？

回答

相關問題