为什么我的链接处于不同的高度
Why are my links at different heights?
我有一个页面,它包含到几个页面的链接,这些链接以内联块的形式存在。我的链接保持在相同的高度,只要它们有相同的文本。像这样:网页的屏幕截图
但是,当我更改框中的文本时,任何一个框的字符数都比另一个低。像这样:网页的屏幕截图
有人能告诉我为什么会发生这种情况以及如何解决吗?
这是我的HTML、CSS和JavaScript:
//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);
});
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;
}
<!--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>
display: inline-block
会导致这种行为。这里有相当多的信息:http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
简言之:在内联块元素上使用vertical-align: top
来保持顶部对齐(而不是坚持基线默认值),或者尝试浮动。
相关文章:
- 如何将返回的值应用于多个不同位置的多个选择器
- 我未保存的更改指令需要适用于具有不同名称的所有表单
- 如果使用jQuery验证器插件找到单选按钮,则将不同的addMethod应用于字段
- 如何在不同的设备模式下强制元素的高度
- 在相对于用户当前 URL 路径的不同路径中设置 Cookie
- “add”函数适用于不同的链接/参数组合
- 李不同高度的物品
- Chrome和Firefox之间的高度计算不同
- 适用于不同设备的响应式画布
- 不同的 CSS 适用于不同的屏幕尺寸
- 每次刷新页面时,JQuery 都会为窗口高度提供不同的值
- 将ajax数据返回到对应于不同链接的不同函数
- 自动点击按钮存在于不同的网页在javascript
- 如果图像文件存在于不同的驱动器中,如何在js/Jquery中给出图像路径
- Do window.postMessage()适用于不同服务器上的不同应用程序
- 如何在不重写现有代码的情况下将jquery代码应用于不同的目标
- SVG-三角函数,用于获得依赖于不同角度的点
- knockoutjs无法将绑定应用于不同的id
- 当测试存在于不同的文件中时,如何在jasmine中分组测试套件
- 在 xhtml 中为正文元素设置背景图像(适用于不同的显示器和分辨率)