这是我的JsFiddle
当我使用Chrome开发人员工具检查锚标签的大小时,它会显示144px*18px第一个元素和310px*18px第二个元素.
我想知道它为什么不采用包含元素的高度和宽度以及如何计算它.
.gallery {
background-color: #abcdef;
}
.gallery img {
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
.normal {
height: 160px;
width: 110px;
border: 5px solid black;
}
.wide {
height: 160px;
width: 280px;
border: 5px solid black;
}<div class="gallery">
<a href="#"> <img class="normal" src=""> </a>
<a href="#"> <img class="wide" src=""> </a>
</div>我正在使用Kube CSS和JS框架(6.5.2)中的模态,其中包含一个表单.当我按Enter键时,模态关闭而不提交表单.
编辑:当关注密码或搜索输入时不会发生这种情况 - 将类型从"文本"更改为"密码"可以解决问题.
<!DOCTYPE html>
<html>
<head>
<title>Basic Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Kube CSS -->
<link rel="stylesheet" href="dist/css/kube.css">
</head>
<body>
<h1>Hello, world!</h1>
<div id='ui-modal-test' class='modal-box hide'>
<div class='modal' style='width:95%'>
<span class='close'></span>
<div class='modal-header'>Modal Form Test</div>
<div class='modal-body'>
<form id="ui-modal-form">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<button>Apply</button>
</form>
</div>
</div>
</div>
<button data-component="modal" data-target="#ui-modal-test">Open</button>
<!-- Kube JS + jQuery are used for some functionality, but are not required for …在我的项目中，我有一个下拉按钮列表，这些按钮使用flex-end. 我创建了一个显示问题的代码的最小版本：
var popper = new Popper(
$('#anchor')[0],
$('#popper')[0],
{
modifiers: {
preventOverflow: {
enabled: true,
boundariesElement: 'window'
}
}
}
);body {
height: 2000px;
}
.parent {
display: flex;
justify-content: flex-end;
}
.anchor {
width: 40px;
height: 40px;
background-color: #333;
}
.popper {
width: 120px;
height: 80px;
background-color: #c23;
border: 2px solid #ae3;
}
ul {
list-style-type: none;
margin: 0 -6px;
}
li {
margin: 0 6px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<ul class="parent">
<li><div class="anchor"></div></li> …