美文网首页
radio 水平布局和取消选中

radio 水平布局和取消选中

作者: 缘之空_bb11 | 来源:发表于2024-04-28 11:14 被阅读0次
  • 1 水平布局
WeChat27a9ec42b5edbd13f928f9f677f1dbe8.jpg

如图所示: 尽管我对两个控件整体进行了水平居中的布局,但是蓝色和棕色的明显的能看出不在一条线上.尤其是对蓝色设置height: 180rpx, 你会惊讶的发现:

WechatIMG306.jpg

我去,什么鬼,为什么没有居中; 这时你去代码中查看,你会发现在radio的外面包裹着一层Lable, 其作用是为了点击后面Text 文字是也能同时响应点击事件;

但是如何才能实现水平居中了:

WechatIMG307.jpg

就是对 Lable 进行布局:

.radio-lable {
      background-color: aquamarine;
      height: 180rpx;
      display: flex;
      align-items: center;   // 水平居中
 }
  • 2 如何取消选中

radio如何实现取消选中

相关文章

网友评论

      本文标题:radio 水平布局和取消选中

      本文链接:https://www.haomeiwen.com/subject/ggyzxjtx.html