0

我有两个问题

  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;
}
4

1 回答 1

0

我不知道您所说的让颜色溢出以填充页面范围是什么意思？你说的是哪种颜色？他们在页面上溢出到哪里？

无论如何，要使您的按钮居中，您可以从 <li> 标签中删除 float:right 属性。然后您可以将这些相同的 <li> 更改为 display:inline 或 display:inline-block。然后，如果您在标签上放置一个 text-align:center ，它会将按钮放在页面的中间顶部。

于 2012-05-21T19:21:04.877 回答