Question

我的html页面上有一个复选框和两个水平对齐的按钮。这些是通过PHP函数动态填充的。我发现很难将复选框对齐到与按钮完全相同的大小，并且很难与按钮保持一致。

以下是一个最小的示例：

<!DOCTYPE html>
<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   
</head>
<body>
<div class="col-xs-6 col-sm-2 text-center">
<img src="" width="200" height="200" class="img"/>
<h6>Test Image</h6>

<input type="checkbox" id="'.$imgnam.'" title="Select Image" name="matchedImage" value="'.$imgnam.'" >

<button class="actButton" id="tbutton" onclick="downloadImage(this.id)" title="Download Image" style="background-color: #CECECE;border: none;color: white;
padding:6px 10px;font-size:12px;cursor:pointer;margin:10px 0px 22px 0px"><i class="fa fa-download"  style="color:#040727"></i></button>

<button class="actButton dropbtn" id="shareImage" onclick="shareImage(this.id)" title="Share Image" style="background-color:#CECECE;border: none;color: white;
padding:6px 10px;font-size:12px;cursor:pointer;margin:10px 0px 22px 0px"><i class="fa fa-share-alt"  style="color:#040727"></i></button>

  </div>

</body>
</html>

如果我将CSS应用于复选框，例如：

input[type=checkbox] {
        width: 10em;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 10em;
        border: 0.2em solid black;
        padding-top: 3px;
    }

该框显示在按钮上方几像素处。如何将复选框与按钮对齐。附加图像输出

Answer 1

删除所有padding并将以下内容添加到.actButton：

display: inline-block;  
vertical-align: middle;
line-height: 32px;
height: 32px;
width: 30px

将font-size增加到18px。也将.actButton类添加到复选框，并删除border和appearance属性以外的所有内容。

另外，包含的<div>已更改为<fieldset>，类别.col-sm-2已更改为.col-sm-6的{{1}}，这意味着屏幕上的空间较小变得更大，您真的要倒退吗？如果是这样，只需更改回-2。还添加了.col-sm-2和<main class='container'>（通常这些标签为<section class='row'>，但是使用语义正确的标签更容易阅读）。

演示

<div>

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid black;
}

.actButton {
  display: inline-block;
  vertical-align: middle;
  line-height: 32px;
  height: 32px;
  width: 30px;
  background-color: #CECECE;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  margin: 10px 0px 22px 0px;
}

Answer 2

您是说em吗？在您的代码中为mm。

input[type=checkbox] {
    width: 10em;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 10em;
    border: 0.2em solid black;
    padding-top: 3px;
}

Answer 3

在您的CSS中为复选框添加此行

vertical-align: middle;

复选框与其他按钮对齐

3 个答案:

演示