时间戳

首页 > 解决方案 > CSS按钮从某处有额外的边距

html - CSS按钮从某处有额外的边距

问题描述

我有一个问题，我的网页上的按钮没有按应有的方式显示。它周围有不需要的黑边显示。说发送的按钮是问题所在。我希望它显示的是为它指定的区域左上角的按钮。背景应该在那里。问题是按钮在哪里，而不是背景本身而不是这样做，它显示在中间的某个地方

.modal {
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #474e5d;
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
	}
.modal-content {
	border-radius: 25px;
	background-color: #fefefe;
  margin: 5% auto auto auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}
.title { 
	font-size: 50px;
	font-family:'Zorque';
	text-align:center;
	margin-top:80px;
	margin-bottom:80px;
}
.enter-label {
	display: block;
	text-align:center;
	margin-top:60px;
	margin-bottom:60px;
}
.enter {
    text-align:center;
}
#nameyourself {
	text-align:center;
}
@font-face {
	font-family: "Zorque";
	src:url("/client/img/Zorque.woff") format("woff")
}
.input {
	text-align:center;
	padding-left:60px;
	padding-right:60px;
	padding-top: 16px;
	padding-bottom: 16px;
}
#chat {
    /*display:none;*/
    width:100%;
    height:100%;
}
#messagebox {
    border: 0; 
    padding: 10px; 
    width: 90%;
    height:10%;
    margin:0;
}
.submitButton {
}
#chatForm{
    background: #033;
}
#msgs {
    min-width:100%;
    min-height:90%;
    width:100%;
    height:90%;
    margin:0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }

#messages li { 
    padding: 5px 10px; 
    background: black; 
    color:#eee;
}
#messages li:nth-child(odd) {
    background: #eee; 
    color:black;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Group Chat</title>
    <link id="favicon" rel="icon" href="https://cdn.glitch.com/ad2a2be0-9feb-4eb9-8151-2f9d1202b0b7%2Ffavicon.ico?1540848159347" type="image/x-icon">
    <script src="/socket.io/socket.io.js"></script>
    <link rel="stylesheet" href="/style.css">
    <script src="/client.js" defer></script>
  </head>
  <body>
    <div id="chat">
        <div id="msgs">
            <ul id="messages"></ul>
        </div>
        <form id="chatForm">
            <input id="messagebox" required>
            <button class="submitButton">
              Send
          </button>
        </form>
    </div>
  </body>
</html>

标签： htmlcss

解决方案

您正在将#messagebox元素与button. 获取整个#messagebox空间并将您的按钮移动到此页面的右侧。删除width: 90%属性，它应该可以正常工作。但是，我不确定最终的设计是什么。

请阅读有关块/内联元素的信息，了解如何构建正确的 HTML/CSS 结构。

示例文章： 块级和内联元素

推荐阅读