css - 960格系统，延展色彩

Question

我有两个问题

1. 我将如何让按钮在网格内居中？

2. 如何让颜色溢出以填充页面范围

   <title>Virtual Harrogate!</title>
   

   <header class="container_12 a-new-homepage">
       <nav>
           <div>
               <ul>                                    
   
                           <div class="grid_12">
   
                               <li class="grid_2 alpha"> 
                                   <a href="" class="a-button">Login</a>
                               </li>
                               <li class="grid_2">
                                   <a href="" class="a-button">Right Now</a>
                               </li>
                               <li class="grid_2">         
                                   <a href="" class="a-button">Features</a>
                               </li>
                               <li class="grid_2"> 
                                   <a href="" class="a-button">Event</a>
                               </li>
                               <li class="grid_2">
                                   <a href="" class="a-button">About us</a>
                               </li>   
                               <li class="grid_2 omega">
                                   <a href="" class="a-button">Contact Us</a>
                               </li>                                   
                           </div>
               </ul>
   
           </div>
       </nav>
   </header>
   

这是我的 layout.css，我没有以任何方式更改 960.css 或 text.css

/* This is where the Format of every page and its tags are defined -- will be superceeding my styles.css */

.a-new-homepage{
    background: #2a2a2a; /* charcoal grey */
    overflow-x:visible;
    overflow-y:visible;
    bottom-border: 20px;
}

/* Header = define the h elements and the page header
-------------------------------------------------------------------------------------------------------------*/
h1 {
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    background-color: #78679A /* purple */
}

h2 {
}

h3 {
}

h4 {
}

h5 {
}

h6 { 
}

nav ul { /* removes all formatting from the list elements which we will go on to define */
    margin: 0;
    padding: 0; 

}

nav li{
    list-style-type: none;
    float: right;   
    font-size: 12px;
    padding: 0 0 0 0;
    text-transform: uppercase;

}

nav li .a-button { /* sets the width and height of the class a-button locally (first number = top n bottom, second = left n right) */
    padding: 5px 15px;

}


/* buttons
--------------------------------------------------------------------------------------------------------------*/


.a-button {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFE8B), to(#99C757));
    background:-moz-linear-gradient(100% 100% 90deg, #99C757, #CCFE8B);
    background-color:#ededed;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #6f9a4d;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:10px 15px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
    text-align: center;
    text-transform: uppercase;
}

.a-button:hover {
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFE8B), to(#99C757));
    background:-moz-linear-gradient(100% 100% 90deg, #99C757, #CCFE8B);
    background-color:#ededed;
}

.a-button:active {
    position:relative;
    top:1px;


/* Tabs = The the inpage tabs
--------------------------------------------------------------------------------------------------------------*/
li.a-tab  {
    list-style-type: none;
    float: center;
    display: inline-block;
    border-top:solid;
    border-right: solid;
    border-left: solid;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    font-size: 16px;
    margin:0 10px; 0 10px;
}

Answer 1

我不知道你说的让颜色溢出来填满页面是什么意思？你说的是哪种颜色？它们溢出到了页面的什么地方？

无论如何，要使按钮居中，您可以从

标签中删除 float:right 属性。然后您可以将相同的

更改为 display:inline 或 display:inline-block。然后，如果您将 text-align:center 放在您的标签上，它会将按钮放在页面的中间顶部。