0
私は練習用のサイトを作っていますが、私はこの奇妙な "バグ"（私が考えることのできるベストワード）を見つけました。私は外側のdivと2つの内側のdivで構成されたドロップダウンを持っています.1つは円形のユーザーの人物のアイコン、もう1つはドロップされたコンテンツのものです。これはすべてtopbarタグで囲まれています。その下にフレックスボックスdivがあり、それをInspect Elementで見ると、5pxのマージンを強制しようとしたにもかかわらずdivに不思議な右マージンがあることがわかります。CSSドロップダウンでFlexboxを妨害する
画像：
はまた、自身のドロップダウンは、ページ外です。私は複数のドロップダウンを持つことができ、ドロップダウンの内容はアイコンの下に自動的にドロップすることができるように、ドロップダウンをダイナミックにしたい。
画像：私はこれらの問題のいずれかを解決どれものdiv absoluteとrelitive、ダウンすべてのドロップを作ってみた
、助けてください。
SCSS：
@import 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300,400,700';
html,body,p,h1,h2,h3,h4,h5,h6,span,div,ul,li,ol,table {
margin: 0;
padding: 0;
}
html {
font-family: 'open sans', sans-serif;
background-color: #fcfcfc;
overflow-x: hidden;
}
.bd {
&.user {
.topbar {
background-color: #198ae7;
font-family: 'roboto', sans-serif;
font-size: 16px;
box-shadow: 0px 2px 2px #aaa;
padding: 20px;
.title {
color: #fff;
letter-spacing: 0.5px;
}
.topbar-dropdown {
float: right;
position: relative;
top: -13px;
span {
cursor: pointer;
background-color: #eee;
padding: 7px 10px 7px 10px;
border-radius: 50%;
float: right;
i {
color: #ccc;
}
}
.topbar-dropdown-content {
display: none;
position: absolute;
background-color: #eee;
box-shadow: 0px 2px 2px #aaa;
margin-top: 51.5px;
}
ul {
list-style-type: none;
li {
padding: 15px 40px 15px 40px;
text-align: right;
&:hover {
background-color: #ccc;
}
}
a {
color: #555;
text-decoration: none;
}
}
&:hover .topbar-dropdown-content {
display: block;
}
&:hover span {
border-radius: 50% 50% 0px 0px;
padding: 7px 10px 15px 10px;
}
}
}
.flexgrid {
display: flex;
flex-direction: column;
margin: 5px 5px 5px 5px;
&.flexgrid-vsmall {
margin: 0px 4.5px 0px 0px;
}
&.flexgrid-vlarge {
margin: 0px 4.5px 0px 0px;
}
&.panel {
display: block;
background-color: #fff;
margin: 4px 0px 4px 0px;
box-shadow: 0px 2px 2px #aaa;
padding: 20px;
h2 {
font-weight: lighter;
font-size: 20px;
display: block;
}
h1 {
font-size: 35px;
}
table {
display: block;
border: 1px solid #ccc;
tr {
border-bottom: 1px solid #eee;
}
td,th {
padding: 5px 15px 5px 15px;
}
}
}
}
}
}
HTML：NOWRAPあなたのリーに：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Checkbook</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/mcb.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<script src="https://use.fontawesome.com/a46aee1aa2.js"></script>
</head>
<body class="bd user">
<div class="topbar">
<span class="title">MY CHECKBOOK</span>
<div class="topbar-dropdown">
<span><i class="fa fa-user fa-2x"></i></span>
<div class="topbar-dropdown-content">
<ul>
<a href=""><li>MY ACCOUNT</li></a>
<a href=""><li>LOGOUT</li></a>
</ul>
</div>
</div>
</div>
<div class="flexgrid">
<div class="flexgrid-vsmall">
<div class="flexgrid panel">
<h2>Balance</h2>
<h1>$0.00</h1>
</div>
</div>
<div class="flexgrid-vlarge">
<div class="flexgrid panel">
<h2>Transactions</h2>
<table>
<tr>
<th title="The transaction method">CODE</th>
<th>DATE</th>
<th>DESCRIPTION</th>
<th title="Type of transaction">TYPE</th>
<th title="Entered on statement">EOS</th>
<th title="Is a fee">FEE</th>
<th>AMOUNT</th>
<th>BALANCE</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
jsコードを追加してください... –
ここにあなたの適切なコードを追加してください。それ以外の場合は質問を削除してください。 – JeetDaloneboy