css 盒子布局的问题

素颜马尾好姑娘i 2022-06-10 10:24 134阅读 0赞

在微信小程序之中，对盒子布局的时候，我们要注意布局大小不要超过页面的宽度，否则会出现布局混乱的问题

这是.wxml内容：

<view class="encryption" animation="{
       {encryptedAnimation}}">
            <view class="passAndEncrypt" >
              <input password placeholder="加密密码" focus="{
       {encryptedInputFocus}}"  value="{
       {encryptedPassword}}" class="encryptedPass" bindinput="inputEncryptedPass"  maxlength = '-1' />
              <button class="encryptedTextBtn" bindtap="copyEncryptedText">复制密文</button>
            </view>
            <textarea  placeholder="{
       {encrypedPlaceholderOri}}" focus="{
       {originalTextFocus}}"  maxlength='-1' value="{
       {originalText}}" bindinput="keyboardInput" />
            <button class="clickEncryptBtn" bindtap="clickEncrypted">点击加密</button>
            <textarea placeholder="{
       {encrypedPlaceholderEnc}}"  maxlength='-1' value="{
       {encryptedText}}" />
     </view>

这是.wxss

.encryption{
      box-sizing: border-box;
      display: block;
      padding:0px;
      margin-left:20px;   margin-right:20px;   width:100%;
      min-width: 310px;

}

如上所述，width:100%，margin-left和margin-right是20px，这样子肯定会把盒子撑大，所以布局就显示混乱。改成下面这样就OK了

margin-left:auto;   margin-right:auto;   width:90%;

发表评论取消回复

表情：

评论列表（有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

相关 3分钟快速掌握Css弹性盒子（伸缩盒子）布局

弹性盒子（flex） 1.语法：display：flex（定义当前元素为弹性盒子） ①弹性盒子是一种布局方式 ②特点：改变子元素在父元素的排列方式采用flex布局

- 日理万妓/ 2022年12月13日 00:45/ 0 赞/ 392 阅读

相关 CSS页面布局之盒子模型

目录 1 盒子模型 1.1 看透网页布局的本质 1.2 盒子模型组成 1.3 边框(border) 1.4 表

不念不忘少年蓝@/ 2022年11月17日 15:58/ 0 赞/ 200 阅读

相关 css盒子模型布局整理

浮动-float 网页布局的本质-用css来摆放盒子。把盒子摆放到相应位置。css提供了三种传统布局方式 1. 普通流（标准流） 2. 浮动方式 3. 定位方式

心已赠人/ 2022年10月19日 05:55/ 0 赞/ 236 阅读

相关 CSS的盒子模型与布局

1.CSS的盒子模型按照我的理解就是网页的模块化设计。当想要修改网页的一些布局的时候，就不用去改html代码了，只需要修改css代码即可（1）边框示例

灰太狼/ 2022年08月03日 11:52/ 0 赞/ 209 阅读

相关 CSS弹性盒子Flexbox布局详解

版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226 布局的传统解决方案，基于盒状模型，依赖 display属性

小咪咪/ 2022年07月28日 11:00/ 0 赞/ 293 阅读

相关 css 盒子布局的问题

在微信小程序之中，对盒子布局的时候，我们要注意布局大小不要超过页面的宽度，否则会出现布局混乱的问题这是.wxml内容： <view class="encrypti

素颜马尾好姑娘i/ 2022年06月10日 10:24/ 0 赞/ 135 阅读

相关 CSS3弹性盒子flex布局方式

一、CSS3弹性盒子 CSS3 弹性盒子：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的：提供一种更加有效

雨点打透心脏的1/2处/ 2022年01月23日 05:49/ 0 赞/ 411 阅读

相关 CSS3总结五：弹性盒子(flex)、弹性盒子布局

弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-

我会带着你远行/ 2021年12月12日 03:03/ 0 赞/ 825 阅读

相关 css 盒子模型布局案例

<html> <head> <title>css 盒子模型</title> <meta http-equiv="content-typ

左手的ㄟ右手/ 2021年07月24日 14:25/ 0 赞/ 516 阅读

相关 CSS之弹性盒子布局

1、核心代码： display: flex; 2、代码案例： <!DOCTYPE html> <html lang="en"> <head> <meta char...

小鱼儿/ 2021年05月03日 04:22/ 0 赞/ 619 阅读