Question

我正在尝试重新调整我在页面中间/底部附近居中的5x按钮的大小。

如何缩短（同时将它们保持在同一位置）按钮的宽度为目前宽度的一半？

    /* 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;
}

Answer 1

只需将display: inline-block添加到nav课程，然后将width设置为您想要的内容。

例如：

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

修改

要使导航菜单居中，您可以使用相对定位，将left设置为50％并平移-50％，以便将锚点设置为元素的中心。

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

请注意，我将ul的填充设置为零，因为默认左边的填充为40px。

Updated fiddle

Answer 2

试试这个：

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

Answer 3

html, body {
	margin: 0;
	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 {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
}

.container {
	margin: 0 auto;
	max-width: 940px; 
	padding: 0 10px; 
}


/* Header */
.header {
  height: 800px;
  text-align: center; 
  color: white;
}


.header .container {
	position: relative;
	top: 200px;
}

.header h1 {
	font-size: 80px;
	line-height: 100px; 
	margin-top: 0;
	margin-bottom: 80px;
}

@media (min-width:850px) {
	.header h1 {
		font-size: 120px;
	}
}

.header p {
	font-weight: 500;
	letter-spacing: 8px;
	margin-bottom: 40px;
	margin-top: 0;
}

a {
  	background-color: Black; 
  	border: 2px solid;
  	padding: 10px;
  	font-family: Impact;
     font-weight: normal;
  	font-size: 20px;
  	color: white;
  	letter-spacing: 3px;
}
a:hover {
	background: #117bff;
	cursor: pointer; 
	transition: background .5s;  
}


/* Nav */

.nav ul {float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    }
.nav li {
  margin: 0 auto;
  margin-bottom:10px;
	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;

    width: 200px;
   
  
    
  
}

.nav li:hover {
  background: #117bff;
	cursor: pointer; 
	transition: background 1s; 
  font-weight: bold;
}

/* Main */
.main .container {
	margin: 80px auto;
  color: white;
}


/* Jumbotron */
.jumbotron {
	height: 600px; 
	text-align: right;
}

.jumbotron .container {
	position: relative;
	top: 220px;
}


/* Footer */
.footer { 
	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>

Answer 4

使用以下属性定位.nav

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

您可能想删除.contaienr（您不需要它）。它有max-width 960px。

有人知道如何缩短按钮的宽度吗？

4 个答案: