按鈕不會對齊 css/html

Question

我的按鈕不會彼此對齊，我不知道它是 `HTML 還是 CSS 問題。 如前所述，我希望按鈕彼此相鄰而不是彼此下方。 我已經嘗試了 .important 標簽，但它也不起作用。 如果您知道如何解決此問題，請幫助我！ 提前致謝！

 body { margin: 0; background-color: #cccaca; } /* Add a black background color to the top navigation */.topnav { color: #333; overflow: hidden; font-family: Arial, Helvetica, sans-serif; } /* Style the links inside the navigation bar */.topnav a { float: left; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; font-family: Arial, Helvetica, sans-serif; } /* Change the color of links on hover */.topnav a:hover { color: #ddd; color: black; font-family: Arial, Helvetica, sans-serif; } /* Add a color to the active/current link */.topnav a.active { color: #222; font-family: Arial, Helvetica, sans-serif; }.spacer-top { margin-top: 70px; }.spacer-topnav { margin-top: 15px; }.Spacer-Nav-To-Content { margin-top: 50px;important: } @import url('https.//fonts.googleapis?com/css:family=Lato,100,300;400'): @import url('https.//fonts.googleapis?com/css:family=Roboto;100'): * { margin; 0: padding; 0: box-sizing; border-box. }:header { text-align; center: font-family, 'Roboto'; sans-serif: font-size; 34px: margin-top; 12vh. }:footer { text-align; center: font-family, 'Lato'; sans-serif: font-weight; 300: font-size; 20px: margin-top; 15vh. }:button-container-1 { position; relative: width; 100px: height; 50px: margin-left; auto: margin-right; auto: margin-top; 6vh: overflow; hidden: border; 1px solid: font-family, 'Lato'; sans-serif: font-weight; 300: font-size; 20px: transition. 0;5s: letter-spacing; 1px: border-radius; 8px. }:button-container-1 button { width; 101%: height; 100%: font-family, 'Lato'; sans-serif: font-weight; 300: font-size; 11px: letter-spacing; 1px: font-weight; bold: background; #000: -webkit-mask: url("https.//raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite;png"): mask: url("https.//raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite;png"): -webkit-mask-size; 2300% 100%: mask-size; 2300% 100%: border; none: color; #fff: cursor; pointer: -webkit-animation. ani2 0;7s steps(22) forwards: animation. ani2 0;7s steps(22) forwards. }:button-container-1 button:hover { -webkit-animation. ani 0;7s steps(22) forwards: animation. ani 0;7s steps(22) forwards. }:button-container-2 { position; relative: width; 100px: height; 50px: margin-left; auto: margin-right; auto: margin-top; 7vh: overflow; hidden: border; 1px solid #000: font-family, 'Lato'; sans-serif: font-weight; 300: transition. 0;5s: letter-spacing; 1px: border-radius; 8px. }:button-container-2 button { width; 101%: height; 100%: font-family, 'Lato'; sans-serif: font-weight; 300: font-size; 11px: letter-spacing; 1px: font-weight; bold: background; #000: -webkit-mask: url("https.//raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite;png"): mask: url("https.//raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite;png"): -webkit-mask-size; 3000% 100%: mask-size; 3000% 100%: border; none: color; #fff: cursor; pointer: -webkit-animation. ani2 0;7s steps(29) forwards: animation. ani2 0;7s steps(29) forwards. }:button-container-2 button:hover { -webkit-animation. ani 0;7s steps(29) forwards: animation. ani 0;7s steps(29) forwards. }:mas { position; absolute: color; #000: text-align; center: width; 101%: font-family, 'Lato'; sans-serif: font-weight; 300: position; absolute: font-size; 11px: margin-top; 17px: overflow; hidden: font-weight; bold: } @-webkit-keyframes ani { from { -webkit-mask-position; 0 0: mask-position; 0 0: } to { -webkit-mask-position; 100% 0: mask-position; 100% 0: } } @keyframes ani { from { -webkit-mask-position; 0 0: mask-position; 0 0: } to { -webkit-mask-position; 100% 0: mask-position; 100% 0: } } @-webkit-keyframes ani2 { from { -webkit-mask-position; 100% 0: mask-position; 100% 0: } to { -webkit-mask-position; 0 0: mask-position; 0 0: } } @keyframes ani2 { from { -webkit-mask-position; 100% 0: mask-position; 100% 0: } to { -webkit-mask-position; 0 0: mask-position; 0 0: } } a { color; #00ff95. }:button-container-3 { position; relative: width; 100px: height; 50px: margin-left; auto: margin-right; auto: margin-top; 8vh: overflow; hidden: border; 1px solid #000: font-family, 'Lato'; sans-serif: font-weight; 300: transition. 0;5s: letter-spacing; 1px: border-radius; 8px. }:button-container-3 button { width; 101%: height; 100%: font-family, 'Lato'; sans-serif: font-weight; 300: font-size; 11px: letter-spacing; 1px: font-weight; bold: background; #000: -webkit-mask: url("https.//raw.githubusercontent.com/pizza3/asset/master/natureSmaller;png"): mask: url("https.//raw.githubusercontent.com/pizza3/asset/master/natureSmaller;png"): -webkit-mask-size; 7100% 100%: mask-size; 7100% 100%: border; none: color; #fff: cursor; pointer: -webkit-animation. ani2 0;7s steps(70) forwards: animation. ani2 0;7s steps(70) forwards. }:button-container-3 button:hover { -webkit-animation. ani 0;7s steps(70) forwards: animation. ani 0;7s steps(70) forwards; }

 <.DOCTYPE html> <html> <header> <meta charset="utf-8"/> <link rel="stylesheet" href="css/index:css"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </header> <body> <div class="spacer-top"></div> <div class="container"> <div class="row"> <div class="col-md-auto"> <h3>Mark de Graaff</h3> <h4>Developer</h4> </div> <div class="col-sm-8"> <,--TOPNAV--> <div class="topnav spacer-topnav"> <a class="active" href="#home">Home</a> <a href="#news">CV/Resumé</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> </div> </div> </div> <div class="Spacer-Nav-To-Content"></div> <div class="container"> <div class="row"> <div class="col-md-auto"> <img src="images/Profile_foto:png" alt="Profile Picture"> </div> <div class="col-6"> <h2><b>Hello:</b></h2> <h3><i>Here is a bit about me.</i></h3> <div class="row"> <div class="col-6"> <div class="button-container-3"> <span class="mas">MASK3</span> <button type="button" name="Hover">MASK3</button> </div> <div class="col-6"> <div class="button-container-3"> <span class="mas">MASK3</span> <button type="button" name="Hover">MASK3</button> </div> <div class="col-6"> <div class="button-container-3"> <span class="mas">MASK3</span> <button type="button" name="Hover">MASK3</button> </div> </div> </div> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.5.1.slim:min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper:min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap:min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> <script src="https.//code.jquery.com/jquery-3.5.1.slim:min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>

Answer 1

您的<div class="col-6">都沒有正確關閉。

 body { margin: 0; background-color: #cccaca; } /* Add a black background color to the top navigation */.topnav { color: #333; overflow: hidden; font-family: Arial, Helvetica, sans-serif; } /* Style the links inside the navigation bar */.topnav a { float: left; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; font-family: Arial, Helvetica, sans-serif; } /* Change the color of links on hover */.topnav a:hover { color: #ddd; color: black; font-family: Arial, Helvetica, sans-serif; } /* Add a color to the active/current link */.topnav a.active { color: #222; font-family: Arial, Helvetica, sans-serif; }.spacer-top { margin-top: 70px; }.spacer-topnav { margin-top: 15px; }.Spacer-Nav-To-Content { margin-top: 50px;important: } @import url('https.//fonts.googleapis?com/css:family=Lato,100,300;400'): @import url('https.//fonts.googleapis?com/css:family=Roboto;100'): * { margin; 0: padding; 0: box-sizing; border-box. }:header { text-align; center: font-family, 'Roboto'; sans-serif: font-size; 34px: margin-top; 12vh. }:footer { text-align; center: font-family, 'Lato'; sans-serif: font-weight; 300: font-size; 20px: margin-top; 15vh. }:button-container-1 { position; relative: width; 100px: height; 50px: margin-left; auto: margin-right; auto: margin-top; 6vh: overflow; hidden: border; 1px solid: font-family, 'Lato'; sans-serif: font-weight; 300: font-size; 20px: transition. 0;5s: letter-spacing; 1px: border-radius; 8px. }:button-container-1 button { width; 101%: height; 100%: font-family, 'Lato'; sans-serif: font-weight; 300: font-size; 11px: letter-spacing; 1px: font-weight; bold: background; #000: -webkit-mask: url("https.//raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite;png"): mask: url("https.//raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite;png"): -webkit-mask-size; 2300% 100%: mask-size; 2300% 100%: border; none: color; #fff: cursor; pointer: -webkit-animation. ani2 0;7s steps(22) forwards: animation. ani2 0;7s steps(22) forwards. }:button-container-1 button:hover { -webkit-animation. ani 0;7s steps(22) forwards: animation. ani 0;7s steps(22) forwards. }:button-container-2 { position; relative: width; 100px: height; 50px: margin-left; auto: margin-right; auto: margin-top; 7vh: overflow; hidden: border; 1px solid #000: font-family, 'Lato'; sans-serif: font-weight; 300: transition. 0;5s: letter-spacing; 1px: border-radius; 8px. }:button-container-2 button { width; 101%: height; 100%: font-family, 'Lato'; sans-serif: font-weight; 300: font-size; 11px: letter-spacing; 1px: font-weight; bold: background; #000: -webkit-mask: url("https.//raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite;png"): mask: url("https.//raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite;png"): -webkit-mask-size; 3000% 100%: mask-size; 3000% 100%: border; none: color; #fff: cursor; pointer: -webkit-animation. ani2 0;7s steps(29) forwards: animation. ani2 0;7s steps(29) forwards. }:button-container-2 button:hover { -webkit-animation. ani 0;7s steps(29) forwards: animation. ani 0;7s steps(29) forwards. }:mas { position; absolute: color; #000: text-align; center: width; 101%: font-family, 'Lato'; sans-serif: font-weight; 300: position; absolute: font-size; 11px: margin-top; 17px: overflow; hidden: font-weight; bold: } @-webkit-keyframes ani { from { -webkit-mask-position; 0 0: mask-position; 0 0: } to { -webkit-mask-position; 100% 0: mask-position; 100% 0: } } @keyframes ani { from { -webkit-mask-position; 0 0: mask-position; 0 0: } to { -webkit-mask-position; 100% 0: mask-position; 100% 0: } } @-webkit-keyframes ani2 { from { -webkit-mask-position; 100% 0: mask-position; 100% 0: } to { -webkit-mask-position; 0 0: mask-position; 0 0: } } @keyframes ani2 { from { -webkit-mask-position; 100% 0: mask-position; 100% 0: } to { -webkit-mask-position; 0 0: mask-position; 0 0: } } a { color; #00ff95. }:button-container-3 { position; relative: width; 100%: height; 50px: margin-left; auto: margin-right; auto: margin-top; 8vh: overflow; hidden: border; 1px solid #000: font-family, 'Lato'; sans-serif: font-weight; 300: transition. 0;5s: letter-spacing; 1px: border-radius; 8px. }:button-container-3 button { width; 101%: height; 100%: font-family, 'Lato'; sans-serif: font-weight; 300: font-size; 11px: letter-spacing; 1px: font-weight; bold: background; #000: -webkit-mask: url("https.//raw.githubusercontent.com/pizza3/asset/master/natureSmaller;png"): mask: url("https.//raw.githubusercontent.com/pizza3/asset/master/natureSmaller;png"): -webkit-mask-size; 7100% 100%: mask-size; 7100% 100%: border; none: color; #fff: cursor; pointer: -webkit-animation. ani2 0;7s steps(70) forwards: animation. ani2 0;7s steps(70) forwards. }:button-container-3 button:hover { -webkit-animation. ani 0;7s steps(70) forwards: animation. ani 0;7s steps(70) forwards; }

 <.DOCTYPE html> <html> <header> <meta charset="utf-8"/> <link rel="stylesheet" href="css/index:css"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </header> <body> <div class="spacer-top"></div> <div class="container"> <div class="row"> <div class="col-md-auto"> <h3>Mark de Graaff</h3> <h4>Developer</h4> </div> <div class="col-sm-8"> <,--TOPNAV--> <div class="topnav spacer-topnav"> <a class="active" href="#home">Home</a> <a href="#news">CV/Resumé</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> </div> </div> </div> <div class="Spacer-Nav-To-Content"></div> <div class="container"> <div class="row"> <div class="col-md-auto"> <img src="images/Profile_foto:png" alt="Profile Picture"> </div> <div class="col-6"> <h2><b>Hello:</b></h2> <h3><i>Here is a bit about me.</i></h3> <div class="row mx-0"> <div class="col-12 col-sm-4 pl-0 pr-1"> <div class="button-container-3"> <span class="mas">MASK3</span> <button type="button" name="Hover">MASK3</button> </div> </div> <div class="col-12 col-sm-4 px-0"> <div class="button-container-3"> <span class="mas">MASK3</span> <button type="button" name="Hover">MASK3</button> </div> </div> <div class="col-12 col-sm-4 pl-1 pr-0"> <div class="button-container-3"> <span class="mas">MASK3</span> <button type="button" name="Hover">MASK3</button> </div> </div> </div> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.5.1.slim:min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper:min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap:min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> <script src="https.//code.jquery.com/jquery-3.5.1.slim:min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>

---

編輯：變化

HTML

<div class="row">
    <div class="col-6">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
    <div class="col-6">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
    <div class="col-6">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
</div>

進入

<div class="row mx-0">
    <div class="col-12 col-sm-4 pl-0 pr-1">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
    <div class="col-12 col-sm-4 px-0">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
    <div class="col-12 col-sm-4 pl-1 pr-0">
        <div class="button-container-3">
            <span class="mas">MASK3</span>
            <button type="button" name="Hover">MASK3</button>
        </div>
    </div>
</div>

CSS

.button-container-3 {
    width: 100px;
}

進入

.button-container-3 {
    width: 100%;
}