gpt4 book ai didi

html - 复选框与其他按钮对齐

转载 作者:行者123 更新时间:2023-11-28 14:24:31 25 4
gpt4 key购买 nike

<分区>

我的 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;
}

框出现在按钮上方几个像素处。如何将复选框与按钮对齐。附加图像输出 enter image description here

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com