Question

我正在尝试均匀地增加此textarea的大小。但是当我将它从100％宽度更改为高于此宽度时，它仅向右增加。我尝试了margin auto和display block但是没有用。这是我的css：

textarea[form="chform"] {

  width: 100%;
  height: 230px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 2px;
  color: grey;
  font-family: 'Exo', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 4px;
  margin-top: 10px;
  resize:none;
}

.profile__form{
  padding: 15px;
  margin: auto;
  border-radius: 50%;

}
.profile_container {
  width: 400px;
  margin: 120px auto 120px;
  /*background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), #f0f0f0, rgba(223,190,106,0.7));*/
  padding: 0 20px 20px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.075);
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.075);
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.075);
  text-align: center;
}

玉：

    extends layout
block content
 body(style='background-color:black')
    link(href='http://fonts.googleapis.com/css?family=Great+Vibes', rel='stylesheet', type='text/css')
    div.right  
        if(user)
            a Welcome #{user.name}
            | &nbsp
            a(href='/main') Home
            | &nbsp
            a(href='/profile') Profile
            | &nbsp
            a(href='/logout') Logout
        else
            a(href='/main') Home
            | &nbsp
            a(href='/register') Register
            | &nbsp
            a(href='/login') Login 

    div.profile_container
        form.profile__form(role='form', action="/add-chapters",id="chform" method="post", style='max-width: 800px;')
            .profile__form-heading Add Chapter
            input.form-control(type='number', min="1" name="chapterNumber", id="inputChapterNumber" placeholder='Chapter Number')
            br
            input.form-control(type='text', name="chapterTitle", id="inputChapterTitle", placeholder='Title')


        textarea(name='chapterStory', cols='30', rows='5', form="chform", placeholder="Enter Story")
        br
        button.chform(type='submit') Save

这是我增加宽度后到目前为止看到的图像。我只想要一个更大的textarea并集中：

https://i.stack.imgur.com/xSBdL.jpg

编辑：确定添加了父css

Answer 1

图片现在固定： https://i.stack.imgur.com/dbtiY.jpg

所以我通过增加父容器的宽度来修复它的配置文件表单和配置文件容器。然后定位相对，显示块和边距自动。简单！

textarea[form="chform"] {

  width: 70%;
  height: 500px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 2px;
  color: grey;
  font-family: 'Exo', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 4px;
  resize:none;
  position: relative;
  display:block;
  margin:auto;
  margin-top: 10px;




}

当超过其宽度限制时，在容器内均匀增加textarea宽度空间 - css

1 个答案: