关于checkbox与文字混排无法对齐的解决方法

最新推荐文章于 2022-07-16 14:21:08 发布
最新推荐文章于 2022-07-16 14:21:08 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： DIV+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PainsOnline/article/details/8215967
版权

先前代码如下

<span style="vertical-align:middle"><input  type="checkbox" name="send_message_item" />禁止解析BBCode/span>

如此无法居中，改变后代码如下


<span><input style="vertical-align:middle" type="checkbox" name="send_message_item" /><label style="vertical-align:middle">禁止解析BBCode</label></span>

需要checkbox居中对其 然后文字也要居中对齐，checkbox在FF和IE下表现不一样 不信你试一试 有的浏览器有默认的margin 大概2px 有的有默认的padding 而且不管你怎么设置默认的margin和padding 是无法去掉的

很诡异

八面碰壁居士
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
checkbox与文字混排无法对齐导致不美观的解决方法
09-25
checkbox与文字不对齐会影响美观本文将将介绍解决方法：需要checkbox居中对其 然后文字也要居中对齐，checkbox在FF和IE下表现不一样;不管你怎么设置默认的margin和padding是无法去掉的
表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐）
09-25
在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。
checkbox/input文本框与文字对齐
weixin_30604651的博客
11-19 302
3种方法都能实现checkbox文本框或radio文本框与文字对齐： <meta charset="utf-8"> <input style="vertical-align:top" type="checkbox" /><label style="vertical-align:top">使用css对齐</label><br /&gt...
checkbox与文字对齐的方法
czh60144的博客
07-16 3010
checkbox与文字对齐的方法
html复选框和文字水平对其,input checkbox、radio、button与文字对齐
weixin_29355333的博客
06-04 2663
如果把文字与 checkbox、radio、button 排在一起，它们不对齐，文字总要下一点，看起来有点别扭，有无办法使它们对齐？用 Css 可以实现此目的，不过在使用过程中，可能会遇到一些问题。如果 Css 定义的 html 标签不对，虽然 Css 是一样，但仍然不能让 checkbox、radio、button 与文字对齐，笔者在实际应用过程中就多次遇到这种情况，故总结出来与大家分享，避免犯...
复选框与文字对齐问题的解决方法
我们仨
08-13 2234
在做图书商城的登录页面时遇到一个问题，复选框与文字对不齐，效果图如下所示： 部分代码如下所示： <input type="checkbox" name="checkbox" value="checkbox" /> <font>记住用户</font>&nbsp;&nbsp; <input type="checkbox" name="...
一个checkbox细节处理方式（checkbox与后面的文字对其）
weixin_30376323的博客
03-21 228
两点细节： 1、checkbox和文字的中线重合 2、点文字可对checkbox发生作用 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态分页</title> <style type="text/css"&...
checkbox和后面文字无法对齐的解决方法
热门推荐
静水
04-17 1万+
checkbox和后面的文字如果不加样式，会导致checkbox和文字对齐，解决办法是对checkbox和文字同时添加如下样式：vertical-align:middle; 如例所示：c:forEach var="user" items="${userItem}"> <label> <input type="checkbox" value="${user.map.YHID}
解决checkbox与对应文字不对齐的问题
weixin_30484739的博客
03-23 1208
最近公司比较忙，所以一直在赶项目，很久没有更新博客了。 刚才在工作中又遇到了一个问题，下面我来分享一下吧(｡･∀･)ﾉﾞ 问题所在 我写了一个input，他的类型是checkbox，在他的后面接着label标签进行描述。 html如下： <input type="checkbox" checked="checked" name="sign" id="sign"/> ...
checkbox 与后面的文字不对齐
xcc_2269861428的博客
09-09 704
如图： 文字始终在下面，不能对齐 <td class="tb_bg"><label for=""><font style="font-size: 14px; color: red;">*</font>提审时间</label></td> <t...
表单checkbox和radio文字对齐的代码
09-28
表单元素input、文字完美垂直居中对齐方法.
checkbox与说明文字无法对齐的问题
清晨之风专栏
07-07 912
写过Web页面的朋友大概都曾遇到过这样的问题：checkbox与说明文字（比如一个label标签或一个a标签）无法对齐，要不是checkbox上浮了，要不是说明文字上浮。    以前遇到过这个问题，但是都直接忽视，并未深究。今天要解决项目中遗留下的界面显示问题，这个问题终于绕不过去了，因为它真的是无处不在。   今天，借助于伟大的google，同时自己不断试验，终于解决了这个“老大难”的...
解决checkbox与文字对不齐问题
风轻云断的博客
12-16 1913
checkbox与文字的父容器增加样式（可选） padding-top:2px; 文字增加样式 position: relative;top:-2px;
checkbox如何与说明文字无法对齐
暴风战狼的博客
04-18 561
写过Web页面的朋友大概都曾遇到过这样的问题：checkbox与说明文字（比如一个label标签或一个a标签）无法对齐，要不是checkbox上浮了，要不是说明文字上浮。  解决这个问题其实很简单，真的灰常简单，把要对齐的每个标签，都加一个css属性： vertical-align:middle; 例如： 原来代码 修改后代码
checkbox和后面的文字对齐解决方案
01-10 1万+
checkbox和后面的文字如果不加样式，会导致checkbox和文字对齐， 解决办法是对checkbox和文字同时添加如下样式： vertical-align:middle; 1 如例所示： c:forEach var="user" items="${userItem}"> type="checkbox" value="${user.map.YHID}
Checkbox样式，调整和文字齐平
人生若南柯一梦
03-07 3077
[乐意黎]复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法
打杂人
06-14 1万+
复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法 今天项目中出现了一个checkbox与同一行的文字不能对齐的问题，检查后发现个问题，checkbox和radio两个标签的默认高宽都是13px，而项目中使用的字体大小却是12px，如果将字体调整为14px就不存在这个问题了，于是作者根据网上查到的资料整理了几种解决办法。 先发一下具体的问题情况以及解决
android gridview checkbox 框 文字 顶对齐
最新发布
09-01
在Android的GridView中，如果想要让复选框和文字顶对齐，可以通过设置GridView的适配器来实现。 首先，创建一个自定义的适配器类，继承自BaseAdapter。在适配器的getView方法中，可以使用一个LinearLayout来包裹复选框和文字，然后设置LinearLayout的gravity属性为top，这样就可以让复选框和文字顶对齐了。 具体的代码实现如下： ``` public class MyAdapter extends BaseAdapter { private Context mContext; private List<String> mDataList; public MyAdapter(Context context, List<String> dataList) { mContext = context; mDataList = dataList; } @Override public int getCount() { return mDataList.size(); } @Override public Object getItem(int position) { return mDataList.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { convertView = LayoutInflater.from(mContext).inflate(R.layout.grid_item, parent, false); holder = new ViewHolder(); holder.checkBox = convertView.findViewById(R.id.checkbox); holder.textView = convertView.findViewById(R.id.textview); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.textView.setText(mDataList.get(position)); holder.checkBox.setChecked(false); return convertView; } private static class ViewHolder { CheckBox checkBox; TextView textView; } } ``` 在上述代码中，R.layout.grid_item代表GridView的每个单元格布局文件，该布局文件中的复选框和文字应该被包裹在一个LinearLayout中，并设置LinearLayout的gravity属性为top。 然后，在GridView的Activity中，使用这个自定义适配器来设置GridView的适配器： ``` GridView gridView = findViewById(R.id.gridview); List<String> dataList = new ArrayList<>(); // 添加数据到dataList MyAdapter adapter = new MyAdapter(this, dataList); gridView.setAdapter(adapter); ``` 通过这样的方式，复选框和文字就可以顶对齐了。希望以上回答能够帮到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值