CSS HTML隐藏屏幕右侧的字段 [英] CSS HTML hiding a field from screen's right

问题描述

我在文档右侧放置了一个表格，只显示了其中的一部分

 < form class =right - 形式> 
< textarea>< / textarea> 
< input type =submitvalue =submit>< / div> 
< / form> 
  

和我一样（简化示例）

  body {
 height：100％; 
宽度：100％; 
} 
 
 .right-form {
 position：absolute; 
 rigth：-220px; 
宽度：250px 
过渡：宽度0.5s缓解0s，正确0.5s缓解0s; 
} 
 .right-form：hover {
 right：0px; 
 
 
 
 
 
 $ b 
除了底部的滚动条出现向左滚动到正确的时候，表单隐藏，我不希望它出现。有人知道如何处理这个C​​SS问题？希望这个问题是可以理解的... ... 
 
 
非常感谢
 
 
编辑：
带溢出规则由matthias.p提出，用户仍然可以按下箭头键向右滚动一下。 
 
解决方案
添加
  overflow：hidden; 
  
添加到body规则中。 
 
 
 编辑： 
您可以这样做： 
 
 
  body {
 height：100 ％; 
宽度：100％; 
} 
 .right-form {
 position：absolute; 
 right：0; 
 width：30px; 
 overflow：hidden; 
过渡：宽度0.5s缓解; 
} 
 .right-form：hover {
 width：250px; 
} 
  
而不是改变右 value我改变了窗体的宽度，并在窗体上做了 overflow ，而不是在body上。现在，您不能再使用箭头键在不悬停时显示表单。
 
I positioned a form to the right of a document showing only a part of it
<form class="right-form">
   <textarea></textarea>
   <input type="submit" value="submit"></div>
</form>
and I styled like this(simplified example)
 body{
   height: 100%;
   width: 100%;
 }

.right-form{
   position:absolute;
   rigth: -220px;
   width: 250px
   transition: width 0.5s ease 0s, right 0.5s ease 0s;
}
.right-form:hover{
   right: 0px;
}
Everything works well except the scroll bar at the bottom appears to scroll left to the right when the form is hidden, and I do not want it to appear. Someone knows how to deal with this css problem? Hope the problem is understandable...

Thanks a lot

EDIT:
    with the overflow rule proposed by matthias.p the user can still press the arrow key pad a scroll to the right
解决方案
Add
overflow: hidden;
to the body rule.

Edit:
You could do this:
body {
height: 100%;
width: 100%;
}
.right-form {
position:absolute;  
right: 0;
width: 30px;
overflow: hidden;
transition: width 0.5s ease;
}
.right-form:hover {
width: 250px;
}
Instead of changing the right value I have changed the width of the form and did the overflow on the form instead on the body. Now you cannot use the arrow keys anymore to display the form when not hovering.

                        
这篇关于CSS HTML隐藏屏幕右侧的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！