CSS定位问题(拆分按钮下拉)-无法将元素移动到另一侧并位于按钮旁边

Question

CSS一直是我最大的弱点，即使在这里和那里的一些教程之后，我仍然是一个新手在定位方面的东西。

我想将下拉悬停按钮移动到另一个按钮旁边(拆分按钮下拉)。然而，即使在使用position:auto和left:auto之后，它仍然出现在另一边，我不希望它出现在那里。寻找一个HTML/CSS专家，可以给这个新手指路:)

这是我所谈论的内容的图片:

要移动的元素

我希望分割按钮看起来像(注意:只是彼此的位置，而不是颜色或大小等)。

拆分按钮查看

这是我的HTML代码:

<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The "All Referral" Dropdown hover button -->
<button class="btn">All Referral</button>
<div class="dropdown">
<!-- The Dropdown button with the arrow and the links -->  
<button class="btn" style="border-left:1px solid orange">
<i class="fa fa-caret-down"></i>
</button>
<!-- The links for all referral in the dropdown button -->
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

这是我的CSS:

/* Dropdown Button */
.btn {
background-color: orange;
color: white;
padding: 2px 20px 3px 20px;
float: right;
font-size: 14px;
font-weight:bold;
text-decoration:none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding: 2px 20px 3px 20px;
float: right;
font-size: 14px;
font-weight:bold;
text-decoration:none;   
/* position: absolute;  */
/* display: inline-block; */
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: silver;
min-width: 160px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: orange}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.btn:hover, .dropdown:hover .btn  {
background-color: silver;
}

也有任何youtube教程或绝对方便的pdf/书籍，无论"半高级";CSS技巧和技巧?我有一些基本的想法，但是对我来说很难在页面上移动东西以及它应该放在哪里等等。

再次，非常感谢任何帮助来我的方式!

Answer 1

我建议使用flexbox进行定位。看看下面的链接。https://codepen.io/jcbryant/pen/dyObVbL

我所做的:在按钮周围添加了一个div容器。为每个按钮提供了自己独特的id，以便更好地控制。删除了float属性，并用display: flex代替它们。删除下拉按钮上的padding属性，并添加margin-left: 0px;。

Answer 2

在All referals按钮和下拉菜单的容器上做一个display: flex;，然后做margin-left: 0;在.dropdown btn

Answer 3

HTML代码:

<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The "All Referral" Dropdown hover button -->
<div id="buttonContainer"> <!--BUTTON CONTAINER-->

<button id="button">All Referral</button> <!--CHANGED TO ID -->
<div class="dropdown">
<!-- The Dropdown button with the arrow and the links -->  
<button id="dropButton" style="border-left:1px solid orange"> <!--CHANGED TO ID -->
<i class="fa fa-caret-down"></i>
</button>

<!-- The links for all referral in the dropdown button -->
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
</div>
</div>

</div>

<span style="float:left;">
<a class="btnWhiteblueMin marleft" href="#">Button 1</a>
<a class="btnWhiteblueMin marleft" href="#">Button 2</a>
<a class="btnWhitepurpleMin" href="#">Button 3</a>
</span>
<br class="clr" /> 

</div>

CSS代码:

/* Participant Profile Header Drop-down Button -CoachPanda Edit */
/* Dropdown Button */
#buttonContainer {
display: flex;
float: right; /*Q change*/
}
#button {
background-color: orange;
color: white;
padding: 2px 20px 3px 20px;
display: flex;
font-size: 14px;
font-weight:bold;
text-decoration:none;
}
#dropButton {
background-color: orange;
display: flex;
margin-left: 0px;
font-size: 14px;
padding: 5px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {  
font-weight:bold;
text-decoration:none;
font-size: 14px;    /*Q change */ 
right: 0px;
/* position: absolute;  */
/* display: inline-block; */
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
font-size: 14px;  /*Q change font size*/    
display: none;  
position: absolute;
background-color: silver;
min-width: 160px;
z-index: 1;

}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: orange}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.btn:hover, .dropdown:hover .btn  {
background-color: silver;
}