如何使这些按钮的大小看起来相似

Question

我在前端做样式方面很弱，需要你们的小帮助。我希望这些按钮的大小看起来相等。

我有以下代码来更正此问题以实现...

 <div>
  {userInfo && userInfo.isAdmin && (
    <Container>
      <ListGroup variant="">
        <ListGroup.Item>
          <a href="http://localhost:8000/admin/">
            <Button variant="outline-success">Admin Portal</Button>
          </a>
        </ListGroup.Item>

        <ListGroup.Item>
          <LinkContainer to="/admin/orderlist">
            <Button variant="outline-success">Orders List</Button>
          </LinkContainer>
        </ListGroup.Item>
        <ListGroup.Item>
          {" "}
          <LinkContainer to="/admin/productlist">
            <Button type="submit" variant="outline-success">
              Products List
            </Button>
          </LinkContainer>
        </ListGroup.Item>

        <ListGroup.Item>
          <LinkContainer to="/admin/appointments">
            <Button variant="outline-success">Appointments List</Button>
          </LinkContainer>
        </ListGroup.Item>
      </ListGroup>
    </Container>
  )}{" "}
</div>

目前他们看起来像下面这样

Answer 1

你总是可以使用 flexbox 来处理这些事情。

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  display: flex;
  flex-direction: column;
}

.container button {
  padding: 1rem;
  font-size: 1rem;
}

.container button:not(:first-child) {
  margin-top: 1rem;
}

<div class="container">
  <button>
        ADMIN PORTAL
    </button>

  <button>
        ORDERS LIST
    </button>

  <button>
        PRODUCT LIST
    </button>

  <button>
        APPOINTMENTS LIST
    </button>
</div>

让我知道这是否有效！？

如何使这些按钮的大小看起来相似

How to make these Buttons look similar in Size

css

styles

twitter-bootstrap

reactjs