在水平线上重新排列按钮

Question

我正在设计一个网站，并且有这些菜单按钮，它们将像页面顶部附近的横幅一样用于导航。但是，目前网站上的按钮是垂直的。我如何让它们水平？

这是按钮：

 button1 {
 display: block;
 width: 175px;
 box-sizing: border-box;
 margin: 0.5rem auto;
 padding: 0.75rem;
 font-size: 1.5rem;
 text-align: center;
 color: white;
 border:  solid #ffffff 2px;
 background: #8ec8ea;
 border-radius: 0.5rem;
 outline: none;
 cursor: pointer;
}

还有我的 html 我制作按钮的地方..

<t><a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/"><button1>Home</button1></a></t>
<t><a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Facilities.html"><button1>Facilities</button1></a></t>
<t><a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Facilities.html"><button1>Facilities</button1></a></t>
<t><a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Donate.html"><button1>Donate</button1></a></t>
<t><a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/News.html"><button1>News</button1></a></t>
<t><a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Testimonials.html"><button1>Testimonials</button1></a></t>
<t><a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Contact.html"><button1>Contact us</button1></a></t>

此外，如果有更好的做法 - 请告诉我！

Answer 1

只需在 button1 css

中将 display: block; 更改为 display: inline-block;

JSFiddle：http://jsfiddle.net/ghorg12110/8wzgddhg/1/

如果您想要 HTML W3C 有效：

HTML:

<div class="t">
    <a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/" class="button1">
        Home
    </a>
</div>
<div class="t">
    <a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Facilities.html" class="button1">
        Facilities
    </a>
</div>
<div class="t">
    <a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Facilities.html" class="button1">
        Facilities
    </a>
</div>
<div class="t">
    <a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Donate.html" class="button1">
        Donate
    </a>
</div>
<div class="t">
    <a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/News.html" class="button1">
        News
    </a>
</div>
<div class="t">
    <a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Testimonials.html" class="button1">
        Testimonials
    </a>
</div>
<div class="t">
    <a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Contact.html" class="button1">
        Contact us
    </a>
</div>

CSS:

 .button1 {
     width: 175px;
     box-sizing: border-box;
     margin: 0.5rem auto;
     padding: 0.75rem;
     font-size: 1.5rem;
     text-align: center;
     color: white;
     border: solid #ffffff 2px;
     background: #8ec8ea;
     border-radius: 0.5rem;
     outline: none;
     cursor: pointer;
     display: inline-block;
    text-decoration: none;
 }
 .t {
     display: inline-block;
 }

JSFiddle : http://jsfiddle.net/ghorg12110/8wzgddhg/2/

在水平线上重新排列按钮

Rearrange buttons in a horizontal line

html

css

button