Question

在对齐时，我有一个问题是将表中的所有内容保持在一条直线上。不暴露表格并将所有内容保持在一行中。正如您在图像中看到的那样，带有图标的所有桌子都是直的，而我的不是直的。

同时保持图标与字体大小相同。

例如我想要的输出：

我得到了什么：

.mainlist{
  display: inline;
}

a {text-decoration: none;}
a:hover {text-decoration: underline;}

.ha-bg-parallax {
    background: url(../img/bg.JPG) no-repeat fixed;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 100vh;
    margin: 0 auto;
    width: 100%;
    display: table;
    vertical-align: middle;
}

.ha-bg-parallax .ha-parallax-body {
    display: table-cell;
    vertical-align: middle;
}


nav ul a.active {
  background: rgba(0,0,0,0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>


 <div class="ha-bg-parallax text-center block-marginb-none" data-speed="20" data-type="background">
       <div class="ha-parallax-body">
   <div id="home" class="section scrollspy">
     <div class="section white">

       <div class="row center">

          <img class="responsive-img valign left" src="http://www.gravatar.com/avatar/325a3d7ccb21e729b51d8a0b343901ba.jpg?s=250&r=pg&d=edlaika.net">

          <ul>
      <li class="mainlist"><i class="fa fa-key fa-3x" aria-hidden="true"></i></li>
      <li class="mainlist">Keybase</li>
      <li class="mainlist"><a href="https://keybase.io/husky">@husky</a></li>
    </ul>

    <ul>
   <li class="mainlist"><i class="fa fa-github fa-3x" aria-hidden="true"></i></li>
   <li class="mainlist">Github</li>
   <li class="mainlist"><a href="https://github.com/edlaika">@edlaika</a></li>
   </ul>

   <ul>
   <li class="mainlist"><i class="fa fa-bitbucket fa-3x" aria-hidden="true"></i></li>
   <li class="mainlist">BitBucket</li>
   <li class="mainlist"><a href="https://bitbucket.org/edlaika">@edlaika</a></li>
   </ul>

   <ul>
   <li class="mainlist"><i class="fa fa-envelope fa-3x" aria-hidden="true"></i></li>
   <li class="mainlist">Email</li>
   <li class="mainlist"><a href="mailto:howl@teamhusky.net">howl@teamhusky.net</a></li>
   </ul>
   <ul>
   <li class="mainlist"><i class="fa fa-steam fa-3x" aria-hidden="true"></i></li>
   <li class="mainlist">Steam</li>
   <li class="mainlist"><a href="http://steamcommunity.com/id/edlaika/">/id/edlaika</a></li>
   </ul>

     </div>
     </div>
  </div>




        </div>
                </div>

Answer 1

您可能必须在程序中包含jQuery，因为您包含了bootstrap。见here

编辑：既然你已经运行了jQuery并且它运行了，那么显示的是3个社交媒体选项卡，你想要那些左对齐而不是中心我接受吗？

你会希望将它们放在图片的右边，而不是在它下面，同时左对齐它们，因为它们居中（因此它们不是直的）。您还希望减小项目的大小，它应该调低字体和相关图像的大小。

如果您更改了行<img class="responsive-img valign center"并将中心设置为左侧，则可以在左侧显示图像。至于更改图标大小，您需要进入用于图标的css样式表。查看更多here

Answer 2

省略.fa-3x类，使图标变为font-size。添加.fa-fw类使它们固定宽度，在这样的列表中看起来更好。不需要这么多<ul>个元素。这些是单个列表中的元素。最好保持简单。这是一个快速的提案。

.profile-img {
  border-radius: 999px;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.ha-bg-parallax {
  background: url(../img/bg.JPG) no-repeat fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  height: 100vh;
  margin: 0 auto;
  width: 100%;
  display: table;
  vertical-align: middle;
}
.ha-bg-parallax .ha-parallax-body {
  display: table-cell;
  vertical-align: middle;
}
nav ul a.active {
  background: rgba(0, 0, 0, 0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

<div class="ha-bg-parallax text-center block-marginb-none" data-speed="20" data-type="background">
  <div class="ha-parallax-body">
    <div id="home" class="section scrollspy container">
      <div class="section white">



        <div class="row">
          <div class="col s6">

            <div class="profile center">
              <img class="profile-img responsive-img valign center" src="http://www.gravatar.com/avatar/325a3d7ccb21e729b51d8a0b343901ba.jpg?s=250&amp;r=pg&amp;d=edlaika.net">
              <h4>edlaike</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at bibendum felis. Nam a porttitor sapien. Donec egestas vulputate urna, quis ullamcorper risus viverra non. Maecenas id erat commodo, aliquam lacus vel, elementum orci. Vestibulum
                tristique luctus felis, quis auctor purus maximus nec.</p>
            </div>

          </div>
          <div class="col s6">
            <div class="mainlist">




              <p>
                <i class="fa fa-key  fa-fw" aria-hidden="true"></i>
                Keybase
                <a href="https://keybase.io/husky">@husky</a>
              </p>

              <p>
                <i class="fa fa-github  fa-fw" aria-hidden="true"></i>
                Github
                <a href="https://github.com/edlaika">@edlaika</a>
              </p>

              <p>
                <i class="fa fa-bitbucket  fa-fw" aria-hidden="true"></i>
                BitBucket
                <a href="https://bitbucket.org/edlaika">@edlaika</a>
              </p>

              <p>
                <i class="fa fa-envelope  fa-fw" aria-hidden="true"></i>
                Email
                <a href="mailto:howl@teamhusky.net">howl@teamhusky.net</a>
              </p>
              <p>
                <i class="fa fa-steam  fa-fw" aria-hidden="true"></i>
                Steam
                <a href="http://steamcommunity.com/id/edlaika/">/id/edlaika</a>
              </p>

            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

</div>
</div>

对齐是css，列表保持一个比例

2 个答案: