Question

我有两个问题

我如何将网格内的按钮居中？

我如何获得溢出的颜色以填充页面的范围

<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

我不知道你的意思是让颜色溢出来填充页面的范围？你在谈论哪种颜色？它们在哪里溢出到页面上？

无论如何，要使按钮居中，你可以取下浮动：右边的属性关闭你的＆lt;李＆GT;标签。然后你可以改变那些＆lt; li＆gt;要显示：inline或display：inline-block。然后，如果您在标记上放置text-align：center，它会将按钮放在页面的中间顶部。

960网格系统，延伸颜色

1 个答案: