前端布置元件

时间:2016-12-21 14:18:46

标签: html css twitter-bootstrap

我有问题 我从bootstrap输入标签  登录|通过|提交按钮

我想设置它

在网站右侧的黑色字段上下边缘黑色字段。 当我改变规模时我会尝试所有内容我的意思是更多和更低地调整Web浏览器的大小 总是元素比例...我想把这个标签和按钮留在这里。并且不要动,怎么做?

或者如何在文本koty代码下边距黑色字段和右边按钮之间进行设置..

@font-face {
    font-family: kernel1;
    src: url(font/kernel1.ttf);
}
body {
  background:#353a40;
}

.box {
    float: left;
    border: solid 0px;
    min-width: 700px;
    width: 100%;
    height: 230px;
    background-color: black;
    color: white;
    font-weight: bold;
}
img {
    margin: 0px;
    max-height: 100%;
    max-width: 100%;
}
#fName {
    font-family: kernel1;
    float: left;
    margin: 20px;
    padding: 1px;
    font-size: 50px;
    color: white;
}
.form-group {
    float: inherit;
    margin: 1px;
    padding: 1px;
    overflow: visible;
    
}
.form-control {
}
.btn-primary {
    min-width: 20px;
    float: left;
}
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Simple Work Management</title>
        <meta name="description" content="Interactive web site">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="screen.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
         <div class="box">
            <a href="index.html"> <img src="gallery/blacCat.jpg" alt="Cat logo" style="float:left"/></a>
             
            <p id="fName">Koty Code</p>
             
             <button type="submit" class="btn btn-primary">Sign in</button>
            <form class="form-inline">
                <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" placeholder="Enter email">
    </div>
                
                <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" placeholder="Password">
    </div>   
                
            </form>
        </div>
             
    </body>
</html>

0 个答案:

没有答案