wp231957 发表于 2020-2-12 18:18:20

button 给弄没了 第一个input里的text 长度 留言内容怎么跑下面去了

本帖最后由 wp231957 于 2020-2-12 18:28 编辑

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
        <style type="text/css">
           div.one
           {
              border-style:solid;
                  border-width:1px;
                  border-color:#0000ff;
              margin-top:40px ;
              width:500px;
              margin-left:400px;
              height:180px
           }
       div.two
           {
              border-style:solid;
                  border-width:1px;
                  border-color:red;
              margin-top:5px ;
              width:500px;
              margin-left:400px;
              height:480px
           }
           label{
                display:inline-block;
                width:80px;                               
                text-align:right;
            }
          .fabu{
                     margin-top:15px ;
                       margin-left:20px;
                       
                       }
      }       
                .input1{
                        width:300px;
                           }
      }       
      .neirong{
                     margin-top:5px ;
               
      }       
                button:last-child{
                                      width=100px;
                                            height=50px;
                                         }
             
        </style>
       
</head>
<body>
   <div class="one">
         <form class="form-horizontal">
             <label>用户名</label>
             <input type="text" class="form-control" id="input1" value=""><br>
             <label>留言内容</label>
             <textarea class="neirong"rows="5" cols="50"></textarea><br>
             <button type="submit" class="fabu" value="发布"></button>
         </form>
       </div>
   <div class ="two">
         <p></p>
   </div>

</body>
</html>

苏沫儿 发表于 2020-2-12 20:00:05

首先按钮不是不见了不就在留言那两个字下面那个小点嘛,你只是没加显示的文本.要想下面那样写就可以了至于为什么留言内容在下面显示 是因为你加了br这个标签

<button type="submit" class="fabu" value="">发布</button>

sukiwhip 发表于 2020-2-12 20:06:08

本帖最后由 sukiwhip 于 2020-2-12 20:07 编辑

光从代码看，css 就已经有两个问题：
1、有多余的 }，具体你看看哪里重复了 }}
2、css 里面是没有 = 的，应该是 :

最后没明白 text 长度和跑到下面去是什么意思，画个原概念图吧

wp231957 发表于 2020-2-12 20:22:15

sukiwhip 发表于 2020-2-12 20:06
光从代码看，css 就已经有两个问题：
1、有多余的 }，具体你看看哪里重复了 }}
2、css 里面是没有 = 的， ...

留言内容 这几个字和后面的texteara 的上边平齐？？如何弄
用户名后面的text框 宽度如何设定和下面的texteara 的宽度相同？？

这个button的问题 按你说的弄好了，还有一个问题那个button的 左边界 如何和上面那两个的左边界相同

sukiwhip 发表于 2020-2-13 11:40:53

wp231957 发表于 2020-2-12 20:22
留言内容 这几个字和后面的texteara 的上边平齐？？如何弄
用户名后面的text框 宽度如何设定和下 ...

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <style type="text/css">
      div.one {
            border-style: solid;
            border-width: 1px;
            border-color: #0000ff;
            margin-top: 40px;
            width: 500px;
            margin-left: 400px;
            height: 180px
      }

      div.two {
            border-style: solid;
            border-width: 1px;
            border-color: red;
            margin-top: 5px;
            width: 500px;
            margin-left: 400px;
            height: 480px
      }

      .one .form-line {
            display: flex;
            justify-content: left;
            align-items:flex-start;
      }

      label {
            display: inline-block;
            width: 80px;
            text-align: right;
      }

      .fabu {
            margin-top: 15px;
            margin-left: 20px;

      }

      #input1 {
            width: 400px;
      }

      .neirong {
            margin-top: 5px;
            width: 400px;

      }

      button:last-child {
            width: 100px;
            height: 50px;
            margin-left: 80px;
      }
    </style>

</head>

<body>
    <div class="one">
      <form class="form-horizontal">
            <div class="form-line">
                <label>用户名</label>
                <input type="text" class="form-control" id="input1" value="">
            </div>
            <div class="form-line"><label>留言内容</label>
                <textarea class="neirong" rows="5" cols="50"></textarea>
            </div>
            <div class="form-line"><button type="submit" class="fabu">发布</button>
            </div>
      </form>
    </div>
    <div class="two">
      <p></p>
    </div>

</body>

</html>

ps，dom 中有很多 id 和 class 设置得不好，但我也只能根据你原来的硬改下去了，css 选择器也有很大改善的空间

wp231957 发表于 2020-2-13 11:56:05

sukiwhip 发表于 2020-2-13 11:40
ps，dom 中有很多 id 和 class 设置得不好，但我也只能根据你原来的硬改下去了，css 选择器也有很大 ...

html/css/js都是新手中的新手
谢谢你

sukiwhip 发表于 2020-2-13 12:24:26

wp231957 发表于 2020-2-13 11:56
html/css/js都是新手中的新手
谢谢你

建议先去了解下盒子布局，有一定熟悉度之后就看 flex 布局，这样在你 div 之中的元素就能很好地控制对齐方向和距离

wp231957 发表于 2020-2-13 12:26:25

sukiwhip 发表于 2020-2-13 12:24
建议先去了解下盒子布局，有一定熟悉度之后就看 flex 布局，这样在你 div 之中的元素就能很好地控制对齐 ...

多谢
页: [1]
查看完整版本: button 给弄没了 第一个input里的text 长度 留言内容怎么跑下面去了