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

鱼C论坛

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

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

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

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

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

x
本帖最后由 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>
最佳答案
月排行榜 / 总排行榜
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 选择器也有很大改善的空间
4444.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

苏沫儿
发表于 2020-2-12 20:00:05 | 显示全部楼层
首先按钮不是不见了  不就在留言那两个字下面那个小点嘛,你只是没加显示的文本.要想下面那样写就可以了至于  为什么留言内容在下面显示 是因为你加了br这个标签
<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框 宽度如何设定  和下 ...
<!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 选择器也有很大改善的空间
小甲鱼最新课程 -> 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-4-9 21:12

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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