Question

我正在尝试将社交媒体图标显示在一行而不是堆叠在一起。我尝试将显示更改为内联而不是阻止，但所有发生的情况是图标尺寸变小但仍然堆叠在一起。

以下是代码：

＆＃13;

html {
  font-size: 100%;
  /*font-size : 16px;*/
}


/*Top Header*/

.header {
  background: #e7e5e4;
}

.header_left {
  width: 65%;
  float: left;
}

.header_right {
  width: 35%;
  float: right;
  background: #e7e5e4;
}

.header_right li {
  margin-left: 45%;
  padding-top: 15px;
}

h1 {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 4.500em;
  padding: 50px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}

.elegantshadow {
  color: #131313;
  background-color: #e7e5e4;
  letter-spacing: .15em;
  text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}

.header h2 {
  font-size: 24px;
  font-family: 'Niconne', cursive;
  color: #131313;
  text-align: center;
}

@font-face {
  font-family: 'si';
  src: url("../socicon/socicon.eot");
  src: url("../socicon/socicon.eot?#iefix") format('embedded-opentype'), url("../socicon/socicon.woff") format('woff'), url("../socicon/socicon.ttf") format('truetype'), url("../socicon/socicon.svg#icomoonregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: si;
    src: url(../socicon/socicon.svg) format(svg);
  }
}

.header .soc {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header .soc li {}

.header .soc li a {
  font-family: si!important;
  font-style: normal;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -o-transition: .1s;
  -ms-transition: .1s;
  -moz-transition: .1s;
  -webkit-transition: .1s;
  transition: .1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  display: block;
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  -webkit-border-radius: 45px;
  -moz-border-radius: 45px;
  border-radius: 45px;
  margin-right: 8%;
  color: #ffffff;
  background-color: #e7e5e4;
}

.header .soc-icon-last {
  margin: 0 !important;
}

.header .soc-twitter:before {
  content: 'a';
}

.header .soc-facebook:before {
  content: 'b';
}

.header .soc-linkedin:before {
  content: 'j';
}

.soc-email1:before {
  content: '<';
}

.header .soc a:hover {
  z-index: 2;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  background-color: #3371b7;
}

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Skramshots Photography</title>
  <meta name="author" content="Mark Stewart" />
  <meta name="description" content="This site is about photography by 
    Mark Stewart a.k.a. Skramshots" />
  <meta name="keywords" content="HTML, CSS, Javascript, jQuery, 
    skramshots, photography">
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <meta name="viewport" content="width=device-width, initial-
    scale=1">

  <link rel="stylesheet" type="text/css" href="css/master2.css">
  <link rel="stylesheet" type="text/css" href="css/imageeffects.css">
  <link rel="stylesheet" type="text/css" href="css/blogsports.css">
  <link rel="stylesheet" type="text/css" href="css/lightbox.css">


  <link href="https://fonts.googleapis.com/css?
    family=Niconne" rel="stylesheet">

  <link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />

</head>

<body>
  <div class="header">
    <ul class="soc">

      <div class="header_left">
        <h1 class="elegantshadow">SkramShots Photography

        </h1>
        <br>
        <h2>Move your mouse pointer over the images</h2>
        <br>

      </div>

      <div class="header_right">
        <li>
          <a class="soc-twitter" href="https://twitter.com/skramshots"></a>
        </li>
        <li>
          <a class="soc-facebook" href="https://www.facebook.com/webpage.skramshots"></a>
        </li>
        <li>
          <a class="soc-linkedin " href="https://www.linkedin.com/in/mark-stewart-8315443?trk=hp-identity-
    name"></a>
        </li>
        <li>
          <a class="soc-email1 soc-
    icon-last btn lightbox-61896367686376 email" href="https://form.jotformeu.com/61896367686376"></a>
        </li>
      </div>
    </ul>
    <br>
  </div>

</body>

</html>

＆＃13;

我不知道如何附加我正在使用的socicon.eot，svg，ttf或woff，所以我希望没有它们，代码才有意义。

我实际上在做的是尝试为移动设备实现媒体查询，让图标显示在一行中，但我只是想让它正常工作`

Answer 1

首先从margin-left: 45%;删除.header_right li。这种风格将li推向右边，迫使它们堆叠。

然后，您只需将display:inline-block;或float:left;添加到.header_right li选择器，即可将其显示在一行中。

难以将社交媒体图标显示为内嵌

1 个答案: