Schaltflächen Position neben einander in der Mitte der Seite

Ich versuche, die position der zwei Tasten, die nebeneinander in der Mitte der Seite und auch die buttons statisch, wie Sie die Größe der Seite.

<!doctype html>
<html lang="en">

<head>
<style>
#button1{
width: 300px;
height: 40px;

}
#button2{
width: 300px;
height: 40px;
}
</style>

<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">

 <title> Survey HomePage</title>
</head>
<body>

<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
 <button type="button home-button" id="button1" >Home</button>
 <button type="button contact-button" id="button2">Contact Us</button>
</body>
 </html>
Was meinst du mit "side by side"?
Ich meine, haben Sie Sie nebeneinander, mit dem oben genannten code, Sie sind neben einander, aber Sie verändern Ihre position, wie Sie die Größe der Seite. Auch ich möchte Sie nebeneinander in der Mitte der Seite.
Nicht eine Antwort auf die Frage, aber möchten Sie vielleicht zu prüfen, mit einer semantischen <nav><a href="/home">Home</a></nav> Art der navigation eher als die Verwendung Tasten.

InformationsquelleAutor Hollywood | 2014-12-27

  1. 7

    können Sie fügen Sie diese zu Ihrem Stil Schaltflächen :

    #button1 , #button2 {
display:inline-block;
/**other codes**/
}


    diese machen Ihre buttons ausrichten, inline-und 'nebeneinander' 🙂

    Nicht setzen Sie Sie in der Mitte der Seite.
    Wie zu entscheiden, den Raum zwischen den zwei Tasten?
    Sie können die margin für den Abstand zwischen Ihnen

    InformationsquelleAutor Ammargraph

  2. 6

    jsfiddle: http://jsfiddle.net/mgtoz4d3/

    Ich habe einen container, in dem sich die beiden Tasten. Versuchen Sie dies:

    CSS:

    #button1{
    width: 300px;
    height: 40px;
}
#button2{
    width: 300px;
    height: 40px;
}
#container{
    text-align: center;
}

    HTML:

    <img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
<br><br>
<div id="container">
    <button type="button home-button" id="button1" >Home</button>
    <button type="button contact-button" id="button2">Contact Us</button>
</div>
    In der jsfiddle, wenn Sie die Größe der Ergebnis-Fenster lange genug auf die Tasten Platz neben einander.

    InformationsquelleAutor gab06

  3. 4

    Dies kann gelöst werden, mithilfe der folgenden CSS:

    #container {
  text-align: center;
}

button {
  display: inline-block;
}

    display: inline-block die buttons nebeneinander und text-align: center stellen die buttons in der Mitte der Seite.

    JsFiddle: https://jsfiddle.net/026tbk13/

    InformationsquelleAutor The Codesee

  4. 0

    Nutzen reguläre Tasten und setzen Sie die Eigenschaft display auf inline, um die Mitte der Tasten auf einer einzigen Zeile. Die Einstellung der Eigenschaft display auf inline-block setzen auch Sie auf der selben Linie, aber Sie werden nicht zentriert über das display-Eigenschaft festlegen.

    InformationsquelleAutor Darwin Airola

Schreibe einen Kommentar