Question

我有一个问题，我的网页上的按钮没有正确显示。它周围显示不必要的黑色边距。说发送的按钮是问题所在。我要显示的是位于其指定区域左上角的按钮本身。背景应该在那里。问题是按钮在哪里，而不是背景本身，而是显示在中间的某个地方

.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>

Answer 1

您的表单中有2个元素。只需在<br>之后使用<input id="messagebox" required>

Answer 2

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

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

示例文章： block-level and inline elements

Answer 3

#messagebox {
    border: 0; 
    padding: 10px; 
    width: 90%;
    height:10%;
    margin:0;
    float:left;
    box-sizing: border-box;
}
.submitButton {
    margin:0;padding:10px;width: 10%;box-sizing: border-box;
    height:10%;background: #033;float:right;border:0;color:white;cursor: pointer;
}
#chatForm{
    /*background: #033;*/
}

Answer 4

您可以尝试将以下特定规则添加到CSS：

#chatForm {
  display: flex;
}

.submitButton {
  flex: 1;
}

CSS按钮在某处有多余的余量

4 个答案: