小贝子编程

避免输入溢出其容器，并使它们在调整大小时跳到下一行



当我添加太多输入(取决于我想要的数量(时，它们会溢出容器，当我只有两个输入时，例如，当我调整窗口大小时，它们溢出容器。

这是我的html和css：

#datails_container {
position: relative;
display: flex;
background-color: darkgrey;
width: 70%;
height: 550px;
border-radius: 5px;
top: 50px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: black;
border-radius: 6px;
}
.theight {
height: 26%;
border: 1px black solid;
margin: auto;
display: flex;
width: 80%;
background-color: white;
border-radius: 4px;
}
form {
width: 100%;
height: 100%;
align-items: center;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
span {
background-color: #b50612;
width: 92px;
height: min-content;
border-radius: 5px;
position: relative;
top: -7px;
left: 12px;
color: white;
font-weight: bold;
text-align: center;
}
#presentaion {
color: wheat;
width: 100%;
position: absolute;
text-align: center;
}
#detsubmitter {
position: absolute;
border: 1px solid black;
display: block;
right: 5px;
bottom: 6px;
background-color: green;
border-radius: 4px;
height: 2.6em;
}
#detsubmitter:hover {
cursor: pointer;
}
.itemcount {
font-size: 16px;
font-family: sans-serif;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: .6em 1.4em .6em 1.4em;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
border-radius: .5em;
appearance: none;
background-color: #fff;
height: 40px;
position: relative;
top: 15px;
left: -76px;
display: flex;
margin-left: 39px;
}
label {
position: relative;
top: 28px;
left: -65px;
height: min-content;
width: 79.9667px !important;
display: inline-flex;
font-weight: bold;
color: black;
}
input {
height: 25px;
border-radius: 5px;
position: relative;
top: 25px;
left: -53px;
margin-right: auto;
float: left !important;
}
<div id="datails_container"  >
<form id="" action="" method="post">
<div id="genre_cont" class="theight" style="margin-top: 75px;">
<span>Genres</span>
<select name="gnerenmbr" class="itemcount" id="gnerenmbr">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
</select>
<label for="gnerenmbr">genre(s):</label>
<input type="text" placeholder="input 1">
<input type="text"  placeholder="input 2">
<input type="text" placeholder="input 3">
<input type="text" placeholder="input 4">
</div>
<br>
<div id="language_cont" class="theight">
<span>Languages</span>
<select name="languagenmbr" class="itemcount" id="languagenmbr">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
</select>
<label for="languagenmbr">Language(s):</label>
<input type="text" placeholder="input 1">
<input type="text"  placeholder="input 2">
<input type="text" placeholder="input 3">
</div>
<br>
<div id="country_cont" class="theight">
<span>Countries</span>
<select name="countrynmbr" class="itemcount" id="countrynmbr">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
</select>
<label for="countrynmbr">country(ies):</label>
<input type="text" placeholder="input 1">
<input type="text"  placeholder="input 2">
</div>
<button id="detsubmitter" type="submit">ADD details</button>
</form>
</div>

  1. 我不希望的输入溢出它们的容器
  2. 如果调整大小时没有空格，我希望输入转到下一行

#datails_container {
position: relative;
display: flex;
background-color: darkgrey;
width: 70%;
height: 550px;
border-radius: 5px;
top: 50px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: black;
border-radius: 6px;
}
.theight {
/* height: 26%; */
border: 1px black solid;
margin: auto;
display: flex;
flex-wrap: wrap;
align-content: space-around;
width: 80%;
background-color: white;
border-radius: 4px;
}
form {
width: 100%;
height: 100%;
align-items: center;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
span {
background-color: #b50612;
width: 92px;
height: min-content;
border-radius: 5px;
position: relative;
top: -7px;
left: 12px;
color: white;
font-weight: bold;
text-align: center;
}
#presentaion {
color: wheat;
width: 100%;
position: absolute;
text-align: center;
}
#detsubmitter {
position: absolute;
border: 1px solid black;
display: block;
right: 5px;
bottom: 6px;
background-color: green;
border-radius: 4px;
height: 2.6em;
}
#detsubmitter:hover {
cursor: pointer;
}
.itemcount {
font-size: 16px;
font-family: sans-serif;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: .6em 1.4em .6em 1.4em;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
border-radius: .5em;
appearance: none;
background-color: #fff;
height: 40px;
position: relative;
top: 15px;
left: -76px;
display: flex;
margin-left: 39px;
}
label {
position: relative;
top: 28px;
height: min-content;
width: 79.9667px !important;
display: inline-flex;
font-weight: bold;
color: black;
}
input {
height: 25px;
border-radius: 5px;
position: relative;
/* top: 25px; */
/* left: -53px; */
margin: 20px;
float: left !important;
}
<!DOCTYPE html>
<html>
<head>
<title>To DO App</title>
<meta name="viewport" content="width = device-width, initial-Scale = 1.0" />
<meta charset="UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- <header>
<h1>To-Do List</h1>
</header>
<div class="inputDiv">
<input type="text" id="inputTask" placeholder="Enter new task here...">
<button id="addBtn" onclick="add()">add</button>
</div>
<div class="tab">
<button class="tabLink active" onclick="tabLinkClick(this,'all')">All</button>
<button class="tabLink" onclick="tabLinkClick(this,'active')">Active</button>
<button class="tabLink" onclick="tabLinkClick(this,'complete')">Completed</button>
</div>
<div class="table" id="todoListTable">
<div class="tr">
<div class="td" >
nothing to do...
</div>
</div>
</div> -->
<div id="datails_container"  >


<form id="" action="" method="post">
<div id="genre_cont" class="theight" style="margin-top: 75px;">
<span>Genres</span>
<select name="gnerenmbr" class="itemcount" id="gnerenmbr">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
</select>
<label for="gnerenmbr">genre(s):</label>
<input type="text" placeholder="input 1">
<input type="text"  placeholder="input 2">
<input type="text" placeholder="input 3">
<input type="text" placeholder="input 4">
</div>
<br>
<div id="language_cont" class="theight">
<span>Languages</span>
<select name="languagenmbr" class="itemcount" id="languagenmbr">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
</select>
<label for="languagenmbr">Language(s):</label>
<input type="text" placeholder="input 1">
<input type="text"  placeholder="input 2">
<input type="text" placeholder="input 3">
</div>
<br>
<div id="country_cont" class="theight">
<span>Countries</span>
<select name="countrynmbr" class="itemcount" id="countrynmbr">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
</select>
<label for="countrynmbr">country(ies):</label>
<input type="text" placeholder="input 1">
<input type="text"  placeholder="input 2">
</div>
<button id="detsubmitter" type="submit">ADD details</button>
</form>
</div>

</html>

如果设置显示：flex；和柔性包装：包装；并对齐内容：周围的空间；你的问题解决了，你可以设置其他风格，看起来更好

问题是因为职位问题。请参阅以下代码以更好地理解。我已经对您的一些代码发表了评论，并添加了两三行。

#datails_container {
position: relative;
display: flex;
background-color: darkgrey;
width: 70%;
height: 550px;
border-radius: 5px;
top: 50px;
/*bottom: 0;*/
/*left: 0;*/
/*right: 0;*/
margin: auto;
/*background-color: black;*/
border-radius: 6px;
}
.theight {
padding-bottom: 10px;
/*position: relative;*/
border: 1px black solid;
margin: auto;
/*display: flex;*/
width: 80%;
background-color: white;
border-radius: 4px;
}
form {
width: 100%;
height: 100%;
align-items: center;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
span {
background-color: #b50612;
width: 92px;
height: min-content;
border-radius: 5px;
position: relative;
top: -7px;
left: 12px;
color: white;
font-weight: bold;
text-align: center;
}
#presentaion {
color: wheat;
width: 100%;
position: absolute;
text-align: center;
}
#detsubmitter {
position: absolute;
border: 1px solid black;
display: block;
right: 5px;
bottom: 6px;
background-color: green;
border-radius: 4px;
height: 2.6em;
}
#detsubmitter:hover {
cursor: pointer;
}
.itemcount {
font-size: 16px;
font-family: sans-serif;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: .6em 1.4em .6em 1.4em;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
border-radius: .5em;
appearance: none;
background-color: #fff;
height: 40px;
/*position: relative;*/
/*top: 15px;*/
/*left: -76px;*/
display: flex;
/*margin-left: 39px;*/
}
label {
/*position: relative;*/
top: 28px;
left: -65px;
height: min-content;
width: 79.9667px !important;
display: inline-flex;
font-weight: bold;
color: black;
display: flex;
}
input {
height: 25px;
border-radius: 5px;
position: relative;
/*top: 25px;*/
/*left: -53px;*/
/*margin-right: auto;*/
/*float: left !important;*/
}
<div id="datails_container"  >


<form id="" action="" method="post">
<div id="genre_cont" class="theight" style="margin-top: 75px;">
<span>Genres</span>
<select name="gnerenmbr" class="itemcount" id="gnerenmbr">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
</select>
<label for="gnerenmbr">genre(s):</label>
<input type="text" placeholder="input 1">
<input type="text"  placeholder="input 2">
<input type="text" placeholder="input 3">
<input type="text" placeholder="input 4">
</div>
<br>
<div id="language_cont" class="theight">
<span>Languages</span>
<select name="languagenmbr" class="itemcount" id="languagenmbr">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
</select>
<label for="languagenmbr">Language(s):</label>
<input type="text" placeholder="input 1">
<input type="text"  placeholder="input 2">
<input type="text" placeholder="input 3">
</div>
<br>
<div id="country_cont" class="theight">
<span>Countries</span>
<select name="countrynmbr" class="itemcount" id="countrynmbr">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
</select>
<label for="countrynmbr">country(ies):</label>
<input type="text" placeholder="input 1">
<input type="text"  placeholder="input 2">
</div>
<button id="detsubmitter" type="submit">ADD details</button>
</form>
</div>

谢谢

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium