Question

这似乎是一个简单的问题，可能有一个简单的解决方案，但我想知道如何从x轴的空格处（从两个div开始）获得两个文本元素（通过按钮）。我指的是下图中的按钮文本。

如何使文本“仪表板”和“新按钮”都在x轴上的同一位置开始？

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ced4da;
  font-family: sans-serif;
}

.wrapper {
  height: 100vh;
}

input[type="button"] {
  border: none;
  background-color: Transparent;
  outline: none;
  height: 20px;
  width: 92%;

  font-size: 13px;
  font-weight: regular;
  color: white;
}

.side-bar {
  display: flex;
  flex-direction: column;

  width: 17%;
  height: 100%;
  background-color: #272C32;
}

.sub-title {
  margin-top: 10%;
  margin-left: 7.5%;
}

.sub-title h3 {
  color: 	#B9B9B9;
  font-size: 13px;
  font-weight: lighter;
}

.splitter {
  display: flex;
  align-self: center;

  width: 85%;
  height: 0.5px;
  background-color: grey;
  margin-top: 12px;
  margin-bottom: 4%;
}

.button {
  position: relative;
  margin-left: 7.5%;
  margin-bottom: 3%;
}

.button form i {
  color: white;
  font-size: 14px;
  transition: 0.3s;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 5px 0px;
}

.button input:hover+i {
  color: dodgerblue;
}

<div class="wrapper">
<div class="side-bar">
  <div class="sub-title">
    <h3>ADMIN TOOLS<h3>
  </div>
  <div class="splitter"></div>
  <div class="button">
    <form>
      <input type="button" value="Dashboard" onclick="window.location.href='http://www.google.com'"/>
      <i class="fas fa-tachometer-alt fa-lg" aria-hidden="true"></i>
    </form>
  </div>
  <div class="button">
    <form>
      <input type="button" value="A new button" onclick="window.location.href='http://www.google.com'"/>
      <i class="fas fa-hand-paper fa-lg" aria-hidden="true"></i>
    </form>
  </div>
</div>
<div class="nav-bar"></div>
</div>

如果有时间，我的CSS代码看起来如何？我仍在学习，如果您不介意的话，也希望获得一些反馈：)谢谢！

Answer 1

所有您需要做的就是在您的<div>元素 s 周围放置一个<form>元素，然后将其位置设置为所需的位置，及其text-align: left;。顺便说一句，您的CSS看起来很棒，请记住，有些事情可以简化，例如

{边距：0；填充：0；}

这非常好，但是*与body相同，尽管其文档记录有所不同。 *适用于所有内容，但是仅当内容在<body>元素中时才显示。

但是很好看，保持它！

P.S。如果可以的话，我会投票给你，但我得票了-我明天再投票

如何使文本从x轴上的空白处开始（不同的div）

1 个答案: