Question

如何在以下代码中使标签水平对齐：

div {
  display: table;
  width: 200px;
}
div input,
div label {
  display: table-cell;
}

<div>
  <input type="checkbox">
  <label>This is a label.</label>
</div>
<div>
  <input type="checkbox">
  <label>This is a label with a longer text.</label>
</div>

请参阅：https://jsfiddle.net/a7t3qnbg/1/

编辑：更清楚：我无法更改固定宽度，我希望标签与复选框在同一行开始，也可以水平对齐（即使在换行符后）。

Answer 1

这可以使用内联块轻松实现：

https://jsfiddle.net/a7t3qnbg/2/

div {
    width: auto;
}
div input, div label {
    display: inline-block;
}

如果您“必须”保持显示：表格作为您的布局，请告诉我们。

Answer 2

将width: 100%添加到div label：

div {
  display: table;
  width: 200px;
}
div input,
div label {
  display: table-cell;
}
div label {
  width: 100%;
}

<div>
  <input type="checkbox">
  <label>This is a label.</label>
</div>
<div>
  <input type="checkbox">
  <label>This is a label with a longer text.</label>
</div>

Answer 3

您可以使用display：inline

div {
    display: table;
    width: 200px;
}
div input, div label {
    display: inline;
}

Answer 4

＆＃13;

div {
width: auto;
}
div input, div label {
display: inline-block;
}

＆＃13;

<div>
  <input type="checkbox">
  <label>This is a label.</label>
</div>
<div>
  <input type="checkbox">
  <label>This is a label with a longer text.</label>
</div>

＆＃13;

Answer 5

您无需使用table属性来对齐这些标签。即使您使用display作为表，每个内部div也可以是表行

Answer 6

您可以inline-block使用label以及（输入默认显示）并添加vertical-align。 Input 无法显示为table-cell，也不会继承其特定属性。

white-space可用于将两个元素保持在同一行。

＆＃13;

div {
   width: 200px;
  white-space:nowrap;
}
div input,
div label {
  vertical-align:middle;/* or top or any other value that suits your needs */
  display:inline-block;/* usefull to label */
  white-space:normal;/* reset usefull to label */
}

＆＃13;

<div>
  <input type="checkbox">
  <label>This is a label.</label>
</div>
<div>
  <input type="checkbox">
  <label>This is a label with a longer text.</label>
</div>

＆＃13;

Answer 7

这样的东西？

＆＃13;

div {
  display: table;
  width: 300px;
}
div input,
div label {
  display: inline;
}

＆＃13;

<div>
  <input type="checkbox">
  <label>This is a label.</label>
</div>
<div>
  <input type="checkbox">
  <label>This is a label with a longer text.</label>
</div>

＆＃13;

Answer 8

您可以在css中添加标签并调整所需的宽度

import numpy as np
from matplotlib import pyplot as plt
from mpl_toolkits.mplot3d import Axes3D
from math import sin, cos, pi
import math


fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')


theta = np.linspace(0,2*pi, 1200)
Z = np.linspace(0,5,1000+600)

Z,theta = np.meshgrid(Z, theta)

X = []
Y = []
R = 0.003


#calculate the x and y values
for i in theta:
    cnt = 0
    tempX = []
    tempY = []
    for j in i:
         #circle
        if(i[0]<=pi):
            tempX.append(R*cos(j))
            tempY.append(R*sin(j))
            cnt+=1
         #ellipse
        else:
            tempX.append(R*cos(j))
            tempY.append(0.006*sin(j))
    X.append(tempX)
    Y.append(tempY)



X1 = np.array(X)
Y1 = np.array(Y)

#rotate around the Z axis
a = -pi/3
for i in range(len(X)):
    X1[i] = cos(a)*X1[i]-sin(a)*Y1[i]
    Y1[i] = sin(a)*X1[i]+cos(a)*Y1[i]



#plot
ax.plot_surface(X1,Y1,Z,linewidth = 0, shade = True, alpha = 0.3)


ax.set_xlim(-0.01,0.01)
ax.set_ylim(-0.01, 0.01)

azimuth = 173
elevation = 52
ax.view_init(elevation, azimuth)
plt.show()

div {
  display: table;
}
div input,
div label {
  display: table-cell;
}

label {
  display: inline-block;
  width: 300px;
  text-align: left;
}

标签与显示表格单元格对齐

8 个答案: