Html 水平按钮的CSS_Html_Css_Button

Html 水平按钮的CSS

html css button

Html 水平按钮的CSS,html,css,button,Html,Css,Button,我试图使我的按钮水平，但总是不工作我尝试过显示：块、显示：内联、调整填充和边距这是我的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</tit

我试图使我的按钮水平，但总是不工作我尝试过显示：块、显示：内联、调整填充和边距

这是我的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>

这是预览

帮我练习提前感谢：）

试试看

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

如果这是您想要的，请选中此链接：-

非常感谢你们：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>

在firefox、safari和chrome:D:D上运行良好

预演

您的HTML无效

p1

和

p2

都是无效的HTML元素。如何更正它们？我想用不同的字体大小创建，尽管看起来不错：P“如何更正它们？我想用不同的字体大小创建”。使用CSS<代码>字体大小。sadaf2605：不好，我的按钮不能正常工作，我想制作水平按钮需要15个声誉：(

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

<!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>

/* 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;
}