Question

So I’ve been learning CSS and HTML (Kind of) from just looking stuff up, but I have a question.

So I did a site with bordering containing buttons as a link to websites (mostly for practice), the issue with this is I don’t know how to place these borders side by side or anything. This isn’t the exact site, but a copy with the links replaced. Feel free to correct any issues at all, any learning is accepted even if it’s not related and just a quicker way to do something.

<!DOCTYPE html>
<html>
  <head>
    <title>Test Site</title>
    <style>
    html, body {
    font-family: Arial,Sans-Serif;
    text-align: center;
    padding: 20px;
}

.button {
    background-color: #04AA6D;
    border: none;
    color: white;
    padding: 15px 32px;
    margin: auto;
    display: block;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
}

.button:hover {
    background-color: #038253;
}

.border {
    border: 3px solid black;
    padding: 10px;
    margin: auto;
    width: 150px;
    margin-top: 20px;
}

.border-2 {
    border: 3px solid black;
    padding: 10px;
    margin: auto;
    width: 150px;
    margin-top: 20px;
}
</style>
  </head>
  <body>
    <h1>Test Site</h1>
    <!-- Button Group 1 -->
    <div class="border">
      <button type="button" class="button" onclick="window.open('https://example.com')">Button 1</button>
      <button type="button" class="button" onclick="window.open('https://example.com')">Button 2</button>
      <button type="button" class="button" onclick="window.open('https://example.com')">Button 3</button>
    </div>
    
    <!-- Button Group 2 -->
    <div class="border-2">
      <button type="button" class="button" onclick="window.open('https://example.com')">Button 1</button>
      <button type="button" class="button" onclick="window.open('https://example.com')">Button 2</button>
      <button type="button" class="button" onclick="window.open('https://example.com')">Button 3</button>
    </div>
  </body>
</html>

I tried floating the element, expecting me to be able to just use margin to add the space, instead resulted in it being still below the object (not what I wanted) and also at the very edge instead of next to the border.

CSS borders next to each other + General Suggestions

LEAVE A COMMENT Hủy