Question

我有一个页面，其中包含内联块形式的链接到几页。我的链接保持相同的高度，只要它们具有相同的文本。像这样：Screenshot of webpage

但是，当我更改框中的文本时，任何具有较少字符的框都低于另一个框。像这样：Screenshot of webpage

有谁能告诉我为什么会这样，以及如何解决它？

这是我的HTML，CSS和JavaScript：

＆＃13;

//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
	var menuAWidth = $('.menu a').css('width');
	menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
	var menuAHeight = menuAWidth*1.618;
	menuAHeight = (Math.round(menuAHeight*1000))/1000;
	$('.menu a').css('height', menuAHeight);
});

＆＃13;

body {
  background: #fffae5;
  font-family: sans-serif;
  margin: 0;
}
.main {
  margin-left: 300px;
  padding-left: 1%;
}
.main h2 {
  text-align: center;
  font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  float: left;
  width: 300px;
  font-size: 20px;
  background: #D2B48C;
  margin-left: 0;
  margin-top: 0;
  height: 100%;
}
#heading {
  background: #a52a2a;
  padding: 5px;
  text-align: center;
  font-family: serif;
}
#heading h1 {
  font-size: 30px;
}
nav {
  line-height: 35px;
  text-align: center;
}
nav ul {
  list-style: none;
  margin: 0;
}
nav ul li,
nav ul {
  padding-left: 0;
}
#sidebar a {
  color: #000;
  text-decoration: none;
}
/*This is the relevant code*/

.menu a {
  color: #000;
  text-decoration: none;
  display: inline-block;
  width: 21%;
  background: #9E7D70;
  padding: 5px;
  margin: 1%;
  border-radius: 10px;
}
.menu h3 {
  text-align: center;
  padding: 0 16px 0 16px;
}
.menu p {
  padding: 0 16px 0 16px;
}
/*Also irrelavent*/

nav a[href="vocab.html"] li {
  background: #000;
  color: #fff;
}
nav a[href="../vocab.html"] li {
  background: #000;
  color: #fff;
}

＆＃13;

<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>He Who Teacheth</title>
  <!--<link rel="stylesheet" type="text/css" href="main.css">
	<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
	<style>
	
	</style>-->
</head>

<body>
  <div id="sidebar">
    <a href="home.html">
      <div id="heading">
        <h1>He Who Teacheth</h1>
        <p><strong>Romans 2:21</strong>
          </br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
      </div>
    </a>
    <nav>
      <ul>
        <a href="home.html">
          <li>Home</li>
        </a>
        <a href="math.html">
          <li>Math</li>
        </a>
        <a href="science.html">
          <li>Science</li>
        </a>
        <a href="history.html">
          <li>History</li>
        </a>
        <a href="art.html">
          <li>Art</li>
        </a>
        <a href="vocab.html">
          <li>Vocabulary</li>
        </a>
        <a href="gospel.html">
          <li>Gospel</li>
        </a>
        <a href="english.html">
          <li>English</li>
        </a>
      </ul>
    </nav>
  </div>

  <!--Main code, this is the part that pertains to the question-->
  <div class="main">
    <h2>Vocabulary</h2>
    <div class="menu">
      <a href="skeleton.html">
        <h3>Skeleton</h3>
        <p>This is the basic HTML structure for all the math pages.</p>
      </a>
      <a href="skeleton.html">
        <h3>Literary</h3>
        <p>This is a personal dictionary of literary terms, with a description of each one.</p>
      </a>
    </div>
  </div>
  <!--<script src="jquery.min.js"></script>
  <script src="main.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

＆＃13;

Answer 1

display: inline-block会导致此行为。这里有相当多的信息：http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

简短回答：在内联块元素上使用vertical-align: top以保持顶部对齐（而不是坚持基线默认值），或尝试使用浮点数。

为什么我的链接处于不同的高度？

1 个答案: