css 如何缩小窗体块?

kwvwclae  于 2022-12-20  发布在  其他
关注(0)|答案(2)|浏览(122)

Image我想让我的窗体块更小,这样我就可以有我的导航按钮的大小

<form>
         <legend><h1>login</h1></legend>
         user: <input id="Email" type="email" class="user">
         <br>
         password: <input id="password" type="password" class="pass"> 
         <br>   
         <button class="submit">Login</button>
         <nav>
            <a href="SignUpPage.HTML" class="signUpPage_link">Dont have an account?</a>
         </nav>
        </form>

我试着改变边距:

margin: 0 300px 0 300px;

我试着给填充物充电

padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 400px;

然而,这仅仅改变了边界的大小,而不是块本身

kgsdhlau

kgsdhlau1#

您必须设置input的样式

input {
  width: 1%;
  height: 1%;
  box-sizing: border-box;
}
cs7cruho

cs7cruho2#

我想你想把登录区做得小一点?这样你就可以在旁边有一个导航栏了?

<div style="width: 175px; height: 200px; border-width: 1px,black;border-style: solid;">
<form  >
    <legend><h2 style="text-align: center;">Login</h2></legend>
    user: <input id="Email" type="email" class="user">
    <br>
    password: <input id="password" type="password" class="pass"> 
    <br>   
    <button class="submit">Login</button>
    <nav>
       <a href="SignUpPage.HTML" class="signUpPage_link">Dont have an account?</a>
    </nav>
   </form>
   </div>

看看这是否有用?你可以看看flexbox vs和grid,看看这是否是你想要达到的效果。也可以看看css样式以及填充和边距如何影响你的网页布局。

相关问题