将两个锚并排对齐

Question

以下是我目前进展的图片：

正如你所看到的那样，锚点是自己不正确的。它们应该是相互等距的，并且是对称排列的。

我做错了什么，我需要做的是让两个锚元素从左到右正确对齐，明显地推动了正确的锚点。

我更喜欢不必改变定位

＆＃13;

＆＃13;

a.genericbuttonleft {
  position: static;
  margin: 0px;
  //float:left;

}
a.genericbuttonright {
  position: static;
  margin: 52%;
  //float:right;

}
.profileinfo {
  position: relative;
  background-color: #202020;
  box-sizing: border-box;
  padding: 20px 20px 25px 20px;
  -webkit-overflow-scrolling: touch;
}
.profileinfo h1 {
  font: 40px/45px'HelveticaNeue-Light', sans-serif-light;
  color: #ffffff;
  margin: 0;
}
.profileinfo a {
  position: absolute;
  right: 30px;
  top: 34px;
  display: block;
  width: 260px;
  box-sizing: border-box;
  padding: 18px 0 16px 0;
  font: 25px/25px'-apple-system', BlinkMacSystemFont, 'HelveticaNeue', Roboto;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #13cc3a;
  border: 0;
  border-radius: 5px;
  margin: 10px auto;
  overflow: hidden;
}

＆＃13;

<div class="profileinfo">
  <h1><!-- this needs to stay here even though not being used --></h1>
  <a class="genericbuttonleft">Search Profiles</a> 
  <a class="genericbuttonright">Create a Profile</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你去吧

＆＃13;

＆＃13;

a.genericbuttonleft {
  margin: 0px;
  left: 0;
}
a.genericbuttonright {
  right: 0;
}
.profileinfo {
  position: relative;
  background-color: #202020;
  box-sizing: border-box;
  padding: 20px 20px 25px 20px;
  -webkit-overflow-scrolling: touch;
}
.profileinfo h1 {
  font: 40px/45px'HelveticaNeue-Light', sans-serif-light;
  color: #ffffff;
  margin: 0;
}
.profileinfo a {
  position: absolute;
  top: 34px;
  display: block;
  width: 260px;
  box-sizing: border-box;
  padding: 18px 0 16px 0;
  font: 25px/25px'-apple-system', BlinkMacSystemFont, 'HelveticaNeue', Roboto;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #13cc3a;
  border: 0;
  border-radius: 5px;
  margin: 10px auto;
  overflow: hidden;
}

＆＃13;

<div class="profileinfo">
  <h1><!-- this needs to stay here even though not being used --></h1>
  <a class="genericbuttonleft">Search Profiles</a> 
  <a class="genericbuttonright">Create a Profile</a>
</div>

＆＃13;

＆＃13;

＆＃13;