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

只需在display: block; css

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

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/

重新排列水平线中的按钮

1 个答案: