设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › button 给弄没了 第一个input里的text 长度 留言内 ...
返回列表 发新帖
查看: 2757|回复: 7

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

[复制链接]
wp231957
发表于 2020-2-12 18:18:20 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 wp231957 于 2020-2-12 18:28 编辑
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.         <style type="text/css">
  6.            div.one
  7.            {
  8.               border-style:solid;
  9.                   border-width:1px;
  10.                   border-color:#0000ff;
  11.               margin-top:40px ;
  12.               width:500px;
  13.               margin-left:400px;
  14.               height:180px
  15.            }
  16.        div.two
  17.            {
  18.               border-style:solid;
  19.                   border-width:1px;
  20.                   border-color:red;
  21.               margin-top:5px ;
  22.               width:500px;
  23.               margin-left:400px;
  24.               height:480px
  25.            }
  26.            label{  
  27.                 display:inline-block;
  28.                 width:80px;                               
  29.                 text-align:right;
  30.             }
  31.             .fabu{
  32.                      margin-top:15px ;
  33.                          margin-left:20px;
  34.                          
  35.                          }
  36.         }       
  37.                 .input1{
  38.                         width:300px;
  39.                            }
  40.         }       
  41.         .neirong{
  42.                      margin-top:5px ;
  43.                
  44.         }       
  45.                 button:last-child{
  46.                                         width=100px;
  47.                                             height=50px;
  48.                                          }
  49.              
  50.         </style>
  51.        
  52. </head>
  53. <body>
  54.      <div class="one">
  55.          <form class="form-horizontal">
  56.              <label>用户名</label>
  57.              <input type="text" class="form-control" id="input1" value=""><br>
  58.              <label>留言内容</label>
  59.              <textarea class="neirong"  rows="5" cols="50"></textarea><br>
  60.              <button type="submit" class="fabu" value="发布"></button>
  61.          </form>
  62.          </div>
  63.      <div class ="two">
  64.          <p></p>
  65.      </div>

  67. </body>
  68. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
sukiwhip
2020-2-13 11:40:53
wp231957 发表于 2020-2-12 20:22
留言内容 这几个字  和后面的texteara 的上边平齐  ？？如何弄
用户名后面的text框 宽度如何设定  和下 ...
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <style type="text/css">
  7.         div.one {
  8.             border-style: solid;
  9.             border-width: 1px;
  10.             border-color: #0000ff;
  11.             margin-top: 40px;
  12.             width: 500px;
  13.             margin-left: 400px;
  14.             height: 180px
  15.         }

  17.         div.two {
  18.             border-style: solid;
  19.             border-width: 1px;
  20.             border-color: red;
  21.             margin-top: 5px;
  22.             width: 500px;
  23.             margin-left: 400px;
  24.             height: 480px
  25.         }

  27.         .one .form-line {
  28.             display: flex;
  29.             justify-content: left;
  30.             align-items:flex-start;
  31.         }

  33.         label {
  34.             display: inline-block;
  35.             width: 80px;
  36.             text-align: right;
  37.         }

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

  43.         }

  45.         #input1 {
  46.             width: 400px;
  47.         }

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

  53.         }

  55.         button:last-child {
  56.             width: 100px;
  57.             height: 50px;
  58.             margin-left: 80px;
  59.         }
  60.     </style>

  62. </head>

  64. <body>
  65.     <div class="one">
  66.         <form class="form-horizontal">
  67.             <div class="form-line">
  68.                 <label>用户名</label>
  69.                 <input type="text" class="form-control" id="input1" value="">
  70.             </div>
  71.             <div class="form-line"><label>留言内容</label>
  72.                 <textarea class="neirong" rows="5" cols="50"></textarea>
  73.             </div>
  74.             <div class="form-line"><button type="submit" class="fabu">发布</button>
  75.             </div>
  76.         </form>
  77.     </div>
  78.     <div class="two">
  79.         <p></p>
  80.     </div>

  82. </body>

  84. </html>
复制代码


ps，dom 中有很多 id 和 class 设置得不好，但我也只能根据你原来的硬改下去了，css 选择器也有很大改善的空间
4444.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

苏沫儿
发表于 2020-2-12 20:00:05 | 显示全部楼层
首先按钮不是不见了  不就在留言那两个字下面那个小点嘛,你只是没加显示的文本.要想下面那样写就可以了至于  为什么留言内容在下面显示 是因为你加了br这个标签

  2. <button type="submit" class="fabu" value="">发布</button>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

sukiwhip
发表于 2020-2-12 20:06:08 | 显示全部楼层
本帖最后由 sukiwhip 于 2020-2-12 20:07 编辑

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

最后没明白 text 长度和跑到下面去是什么意思，画个原概念图吧
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

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

这个button的问题 按你说的弄好了，还有一个问题  那个button的 左边界 如何和上面那两个的左边界相同
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

sukiwhip
发表于 2020-2-13 11:40:53 | 显示全部楼层    本楼为最佳答案   
wp231957 发表于 2020-2-12 20:22
留言内容 这几个字  和后面的texteara 的上边平齐  ？？如何弄
用户名后面的text框 宽度如何设定  和下 ...
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <style type="text/css">
  7.         div.one {
  8.             border-style: solid;
  9.             border-width: 1px;
  10.             border-color: #0000ff;
  11.             margin-top: 40px;
  12.             width: 500px;
  13.             margin-left: 400px;
  14.             height: 180px
  15.         }

  17.         div.two {
  18.             border-style: solid;
  19.             border-width: 1px;
  20.             border-color: red;
  21.             margin-top: 5px;
  22.             width: 500px;
  23.             margin-left: 400px;
  24.             height: 480px
  25.         }

  27.         .one .form-line {
  28.             display: flex;
  29.             justify-content: left;
  30.             align-items:flex-start;
  31.         }

  33.         label {
  34.             display: inline-block;
  35.             width: 80px;
  36.             text-align: right;
  37.         }

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

  43.         }

  45.         #input1 {
  46.             width: 400px;
  47.         }

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

  53.         }

  55.         button:last-child {
  56.             width: 100px;
  57.             height: 50px;
  58.             margin-left: 80px;
  59.         }
  60.     </style>

  62. </head>

  64. <body>
  65.     <div class="one">
  66.         <form class="form-horizontal">
  67.             <div class="form-line">
  68.                 <label>用户名</label>
  69.                 <input type="text" class="form-control" id="input1" value="">
  70.             </div>
  71.             <div class="form-line"><label>留言内容</label>
  72.                 <textarea class="neirong" rows="5" cols="50"></textarea>
  73.             </div>
  74.             <div class="form-line"><button type="submit" class="fabu">发布</button>
  75.             </div>
  76.         </form>
  77.     </div>
  78.     <div class="two">
  79.         <p></p>
  80.     </div>

  82. </body>

  84. </html>
复制代码


ps，dom 中有很多 id 和 class 设置得不好，但我也只能根据你原来的硬改下去了，css 选择器也有很大改善的空间
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

wp231957
 楼主| 发表于 2020-2-13 11:56:05 From FishC Mobile | 显示全部楼层
sukiwhip 发表于 2020-2-13 11:40
ps，dom 中有很多 id 和 class 设置得不好，但我也只能根据你原来的硬改下去了，css 选择器也有很大 ...

html/css/js  都是新手中的新手
谢谢你
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

sukiwhip
发表于 2020-2-13 12:24:26 | 显示全部楼层
wp231957 发表于 2020-2-13 11:56
html/css/js  都是新手中的新手
谢谢你

建议先去了解下盒子布局，有一定熟悉度之后就看 flex 布局，这样在你 div 之中的元素就能很好地控制对齐方向和距离
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

多谢
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 14:15

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表