Question

我已经查看过很多已经被问过的问题，但找不到并回答这些问题对我有用。我正在尝试制作一个中间有一个＆符号的徽标。 Ampersand应该每隔几秒就改变一次字体系列。唯一的问题是，现在当它改变字体时，它会弄乱谁的页面。

主要问题来自CSS

中的第21行

.ampersand{
  display:inline;
  width:35px;
  max-width:35px;
  height:79px;
  max-height: 79px;
  font-family:"Exo", sans-serif;
}

有什么想法吗？

Answer 1

在标记上添加了display：flex并删除了＆符号样式，并将其设为span而不是div，并将line-height: 1添加到其中。

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

<b display: flex;>Flo<span class="ampersand">&</span>Behold</b>

＆＃13;

$(document).ready(function() {
  var fonts = ['Dosis', 'Exo', 'Gloria Hallelujah', 'PT Sans', 'PT Serif', 'Yaanone Kaffeesatz'];
  var counter = 0;
  var inst = setInterval(change, 2000);

  function change() {
    if (counter > fonts.length) {
      counter = 0;
    }
    font_selection = fonts[counter];
    $('.ampersand').css("font-family", font_selection);
    counter++;
  }
});

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Molengo');
@import url('https://fonts.googleapis.com/css?family=Dosis|Exo|Gloria+Hallelujah|PT+Sans|PT+Serif|Yanone+Kaffeesatz');
* {
  font-family: "Gill Sans", sans-serif;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #f5f6fa;
}

#header {
  width: 100%;
  padding: 4% 0px 20px 0px;
}

.logo_text {
  font-family: "Molengo", sans-serif;
  font-size: 70px;
  color: #333;
}

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

.nav {
  width: 100%;
  padding: 25px 0px 25px 0px;
}

.nav>ul {
  padding-top: 15px;
}

.nav>ul>a {
  text-decoration: none;
  color: #333;
}

.nav>ul>a>li {
  color: #333;
  font-size: 25px;
  padding: 20px 30px 20px 30px;
  display: inline;
  transition: border 0.1s linear;
  border: 3px solid #f5f6fa;
}

.nav>ul>a>li:hover {
  border: 3px solid #333;
}

#body {
  padding-top: 35px;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrapper" align="center">

  <div id="header">
    <div class="logo">
      <span class="logo_text"><b display: flex;>Flo<span class="ampersand">&</span>Behold</b>
      </span>
    </div>
    <div class="nav">
      <ul>
        <a href="#">
          <li>Home</li>
        </a>
        <a href="#">
          <li>About</li>
        </a>
        <a href="#">
          <li>Music</li>
        </a>
        <a href="#">
          <li>Media</li>
        </a>
        <a href="#">
          <li>Contact</li>
        </a>
      </ul>
    </div>
  </div>
  <div id="body"></div>
</div>

＆＃13;

Answer 2

您无法为inline elements设置固定的高度。

您需要切换到display:inline-block或display:block将您的元素转换为block elements。

另请注意，默认情况下，某些元素（如或）内联，有些像<div>和 block ，但您仍然可以通过CSS display规则覆盖该行为（默认）。

在您的情况下（我假设您希望阻止跳转徽标文字，当＆符号更改字体时），我建议两件事：

将固定高度设置为.logo_text，您可以添加display:block和max-height: 84px;
将ampersand设置为span而不是div，以使您的HTML标记更具语义相关性;

如何将固定高度和宽度设置为div

2 个答案: