0

2つの質問があります

  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 に答える