在弹出框内三个元素做水平显示

最终效果图要求是这样：

 js代码：

1.  
   // 显示弹出窗口
2.  
   function showPopup(node) {
3.  
   var popup = document.createElement('div');
4.  
   popup.className = 'popup';
5.  
    
6.  
   var inputContainer1 = document.createElement('div');
7.  
   /* inputContainer1.className = 'input-container1'; */
8.  
    
9.  
   var input1 = document.createElement('input');
10.  
    input1.className="input-container1"
11.  
    input1.type = 'text';
12.  
    input1.placeholder = '输入框1';
13.  
    inputContainer1.appendChild(input1);
14.  
     
15.  
    var inputContainer2 = document.createElement('div');
16.  
    /* inputContainer2.className = 'input-container2'; */
17.  
     
18.  
    var input2 = document.createElement('input');
19.  
    input2.className="input-container2"
20.  
    input2.type = 'text';
21.  
    input2.placeholder = '输入框2';
22.  
    inputContainer2.appendChild(input2);
23.  
     
24.  
    var buttonContainer = document.createElement('div');
25.  
    /* buttonContainer.className = 'button-container'; */
26.  
     
27.  
    var addButton = document.createElement('button');
28.  
    addButton.className="button-container"
29.  
    addButton.textContent = '添加';
30.  
    buttonContainer.appendChild(addButton);
31.  
     
32.  
    popup.appendChild(inputContainer1);
33.  
    popup.appendChild(inputContainer2);
34.  
    popup.appendChild(buttonContainer);
35.  
     
36.  
    // 设置弹出窗口的位置
37.  
    var rect = node.getBoundingClientRect();
38.  
    var distance = 50; // 设置距离节点的水平距离
39.  
    var verticalOffset = 10; // 设置垂直偏移量
40.  
    popup.style.left = rect.right distance 'px';
41.  
    popup.style.top = rect.bottom verticalOffset 'px';
42.  
     
43.  
    // 添加弹出窗口到页面
44.  
    container.appendChild(popup);
45.  
    }

因为这个框里只有这三个元素，所以其实只要父元素加display:flex就好了，子元素不用管

.popup: 这是一个 CSS 类选择器，用于选择具有 class="popup" 的元素。在这里，它选择了一个具有 class 为 "popup" 的弹出窗口。

这里的父元素指的其实就是popup，而子元素就是js代码中的input-container1、input-container2、button-container。如果你想要这三个元素在同一个水平线上显示的话，就直接在父元素里操作就好。

想让弹出窗口中的元素在底部对齐，你可以使用 align-items 属性，并将其值设置为 flex-end。

css：

1.  
   .popup {
2.  
   position: absolute;
3.  
   background-color: #5b8cc7;
4.  
   width: 338px;
5.  
   height: 150px;
6.  
   padding: 10px;
7.  
   border: 1px solid #ccc;
8.  
   border-radius: 19px;
9.  
   display: flex;
10.  
    align-items:flex-end;
11.  
    bottom: 0;
12.  
    z-index: 10;
13.  
    opacity: 0.8;
14.  
    right: -10px;
15.  
    }

如果css代码是这样

1.  
   #jsmind_container {
2.  
   width: 800px;
3.  
   height: 500px;
4.  
   border: solid 1px #ccc;
5.  
   background: #f4f4f4;
6.  
   position: relative;
7.  
   display: flex;
8.  
   }

1. #jsmind_container: 这是一个 CSS 选择器，用于选择具有 id="jsmind_container" 的元素。在这里，它选择了一个具有 id 为 "jsmind_container" 的容器。

如果.popup

1. .popup: 这是一个 CSS 类选择器，用于选择具有 class="popup" 的元素。在这里，它选择了一个具有 class 为 "popup" 的弹出窗口。

这篇好文章是转载于：学新通技术网