为什么div元素在重新调整大小时会分开，即使我有内联块？

Question

当我缩小浏览器+按钮时，在复选框事件之间分开，尽管两个div都有内联块

http://blogs.walkingtree.in/2015/06/30/nested-grid-in-sencha-ext-js/

请参阅代码的迷你版：

<div style="display: inline-block;">
  <a class="plus" data-toggle="collapse" data-target="#data" href="#">
    <i class="fa fa-plus-circle"></i><span></span>
  </a>
</div>
<div class="checkbox name" style="font-size: 17px; display: inline-block; margin-left: 5px;">
  <label>
    <input name="unique_id" value="" type="checkbox">
    <div id="unique_id">name - address <span class="label label-info">display</span>
    </div>
  </label>
</div>

但是我只想要+按钮和复选框一起放在一起，就像这张图片一样重新调整大小（没有大小）

Answer 1

在元素上使用inline-block时，它们以父宽度换行。因此，如果你有一个父dIV到你的结构juste添加white-space: nowrap;。它会阻止带有“线块”的孩子进行包裹（进入）。

编辑：你也可以简化你的HTML结构，你有很多简单的元素。

Answer 2

将宽度设置为Div或将“float：left”添加到两个div，其宽度为第二个div。

Answer 3

white-space: nowrap;

将强制内容保持一行

Answer 4

如果你把其中一个div缩短一点，它是否合适呢？

原因是因为即使使用内联块，两个宽度为50％的div实际上也可能不适合一行。它们之间有一点空间。不知道它来自哪里;这里的某个人应该能够提供确切的原因。

但对我个人来说，我要做的就是包裹两个div并给予父div from tkinter import Tk, Frame, Menu import sys, time, math from tkinter import * try: root = Tk() root.wm_title("barcode manager") root.geometry("250x150+300+300") class Example(Frame): def __init__(self, parent): Frame.__init__(self, parent) self.parent = parent self.initUI() def initUI(self): self.parent.title("Registered Barcodes.") menubar = Menu(self.parent) self.parent.config(menu=menubar) fileMenu = Menu(menubar) fileMenu.add_command(label="Add Barcode", command=self.Add_Barcode) fileMenu.add_command(label="Save", command=self.Save) fileMenu.add_command(label="Exit", command=self.onExit) menubar.add_cascade(label="File", menu=fileMenu) listbox = Listbox(root) listbox.pack(fill=BOTH, expand=1) def Popup_Menu(): menu = Menu(root, tearoff=0) menu.add_command(label="Edit", command=lambda:print("hello")) menu.add_command(label="Delete", command=lambda:print(DeleteSelection(self))) def popup(event): menu.post(event.x_root, event.y_root) listbox.bind("<Button-3>", popup) Popup_Menu() def get_lines(): lines = open('lines.txt', 'r') for line in lines: barcode, text = line.split(',') text.strip('\n') line = ': '.join(str(x) for x in ("GTIN #", barcode, text)) listbox.insert(END, line) get_lines() def DeleteSelection(self) : items = listbox.curselection() pos = 0 for i in items : idx = int(i) - pos listbox.delete( idx,idx ) pos = pos + 1 def Add_Barcode(self): import tkinter as tk nroot = Toplevel() nroot.wm_title("Add a barcode") textbox_lbl = Label(nroot, text="text") textbox_lbl.pack(side=LEFT, fill=Y) textbox = Entry(nroot, bd=2) textbox.pack(side=LEFT, fill=Y) textbox.pack(anchor=CENTER) barcode_lbl = Label(nroot, text="barcode") barcode_lbl.pack(side=LEFT, fill=Y) barcode = Entry(nroot, bd=2) barcode.pack(side=LEFT, fill=Y) barcode.pack(anchor=CENTER) def Add(self): nonlocal textbox nonlocal barcode text = textbox.get() barcode = barcode.get() nroot.destroy() a = 0 for item in barcode: a += 1 if a == 7: try: barcode = Get_Check_Digit() barcode = int(barcode) print(barcode) term = ': '.join(str(x) for x in ("GTIN #", barcode, text)) print(term) listbox.insert(END, term) except (): error = Toplevel() error.wm_title("Error") error_label = Label(error, text="please enter only numbers.") error_label.pack(side=TOP, fill=X) else: error = Toplevel() error.wm_title("Error") error_label = Label(error, text="Error") error_label.pack(side=TOP, fill=X) error_label1 = Label(error, text="please enter 7 digits") error_label1.pack(side=TOP, fill=X) time.sleep(5) error.destroy() def Get_Check_Digit(): checklist = [] number = 1 nonlocal barcode for item in barcode: checkitem = int(item) * int(number) checklist.append(checkitem) if number == 3: number = 1 elif number == 1: number = 3 checklist = sum(checklist) def roundup(x): return int(math.ceil(x / 10.0)) * 10 check_digit = roundup(checklist) check_digit -= checklist num = "".join(str(x) for x in (barcode, check_digit)) return num btn = Button(nroot, text="Add", command=lambda:Add(self)) btn.pack(side=BOTTOM, fill=Y) def Save(self): global listbox for item in listbox: print(item) def onExit(self): root.destroy() sys.exit() app = Example(root) root.mainloop() except (): pass 。唯一需要注意的是，您必须明确设置子div的字体大小。

See JSFiddle