Question

我试图让我的按钮水平但总是不起作用我试过显示：块，显示：内联，调整填充＆amp;余量

这是我的HTML

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="refresh" content="text/html">


<title>Rumah Yatim dan Dlu'afa | Jazirah Indonesia I</title>
<link rel="stylesheet" type="text/css" href="basic.css">

</head>
<body>
<div class="banner_box">

<span>
<img src="images/head.png" height="150px" class="banner_img" alt="logo">
</span>

<p1>
RUMAH TAHFIDZ
</p1>
<br>
<p2>
YATIM PIATU DAN DLU'AFA
<p2>

<ul class="navbutton">
<li><a href="x" class="myButton" alt="Beranda">BERANDA</a></li>
<li><a href="x" class="myButton" alt="Acara">ACARA</a></li>
<li><a href="x" class="myButton" alt="Info">INFO</a></li>
<li><a href="x" class="myButton" alt="Donasi">DONASI</a></li>
<li><a href="x" class="myButton" alt="Profil">PROFIL</a></li>
</ul>

</div>


</body>
</html>

这是我的css

/* Html */

html {
    min-height:100%;
    min-width:100%;
    max-height:100%;
    max-width:100%;
}

/* Background */

body {
    background:url(images/body.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

/* Banner */

.banner_box {
    width:480px;
    height:180px;
    padding:5px;
    border:4px;
    border-style:solid;
    border-color:#063;
    margin:0 auto;
}

.banner_img {
    float:left;
    padding-right:10px;
}

p1 {
    font-size:30px;
    font-weight:bold;
    color:#FFF;
    text-align:center;
}

p2 {
    font-size:20px;
    color:#FFF;
    text-align:center;
}

/* Button */

.myButton {
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    padding:10px 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}

.myButton:hover {
    background-color:#5cbf2a;
}

.myButton:active {
    position:relative;
    top:1px;
}

ul.navbutton {
    position:relative;
    list-style-type:none;
}

ul.navbutton li {
    display:inline;
}

这是预览 https://db.tt/uxAm95A2

帮助我练习提前谢谢你：）

Answer 1

尝试

ul li {
  display:inline-block;
  float:left;
}

Answer 2

检查此链接，如果这是您想要的： - http://jsfiddle.net/s7d8D/

 ul.navbutton {position: relative;width: 100%;}

Answer 3

非常感谢你们：D：D：D 我已经编辑了我的html和css

我的HTML

<!DOCTYPE html>
<head>

<meta charset="utf-8">
<meta http-equiv="refresh" content="text/html">


<title>Rumah Yatim dan Dlu'afa | Jazirah Indonesia I</title>
<link rel="stylesheet" type="text/css" href="basic.css">

</head>
<body>
<div class="banner_box">

<span>
<img src="images/head.png" height="150px" class="banner_img" alt="logo">
</span>

<span class="p1">
RUMAH TAHFIDZ
</span>
<span class="p2">
YATIM PIATU DAN DLU'AFA
</span>

<ul class="navbutton">
<li class="navbutton1">
<a href="x" class="myButton" alt="Beranda">BERANDA</a>
</li>
<li class="navbutton2">
<a href="x" class="myButton" alt="Acara">ACARA</a>
</li>
</li>
<li class="navbutton5">
<a href="x" class="myButton" alt="Profil">PROFIL</a>
</li>
<li class="navbutton4">
<a href="x" class="myButton" alt="Donasi">DONASI</a>
</li>
<li class="navbutton3">
<a href="x" class="myButton" alt="Info">INFO</a>
</ul>

</div>


</body>
</html>

这是我的css

/* Html */

html {
    min-height:100%;
    min-width:100%;
    max-height:100%;
    max-width:100%;
}

/* Background */

body {
    background:url(images/body.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

/* Banner */

.banner_box {
    width:480px;
    height:186px;
    padding:5px;
    border:4px;
    border-style:solid;
    border-color:#063;
    border-radius:35px;
    margin:0 auto;
}

.banner_img {
    padding-right:10px;
}

.p1 {
    font-size:30px;
    font-weight:bold;
    color:#FFF;
    position:relative;
    top:-128px;
    text-align:center;
}

.p2 {
    font-size:20px;
    color:#FFF;
    position:relative;
    top:-129px;
    left:190px;
    text-align:center;
}

/* Button */

.myButton {
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    padding:10px 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}

.myButton:hover {
    background-color:#5cbf2a;
}

.myButton:active {
    position:fixed;
    top:1px;
}

.navbutton {
    position:inline;
    width:100%;
}

.navbutton1 {
    position:relative;
    top:-38px;
    left:-30px;
    list-style-type:none;
}

.navbutton2 {
    position:relative;
    top:-58px;
    left:80px;
    list-style-type:none;
}

.navbutton3 {
    position:relative;
    top:-118px;
    left:170px;
    list-style-type:none;
}

.navbutton4 {
    position:relative;
    top:-98px;
    left:240px;
    list-style-type:none;
}

.navbutton5 {
    position:relative;
    top:-78px;
    left:330px;
    list-style-type:none;
}

适用于firefox，safari和chrome：D：D

预览

https://db.tt/oLPp1Bza

水平按钮的CSS

3 个答案: