輸入框被切斷

我正在嘗試創建一個輸入窗體，並且輸入框的右側不斷切斷。我的代碼如下：輸入框被切斷

HTML/CSS

.add_idea_box { 
 
    background-color: #ffffff; 
 
    min-width: 1110px; 
 

 
    margin: 0px 20px 20px 20px; 
 
    overflow: hidden; 
 

 
    border: solid 1px #6a6a6a; 
 
    box-shadow: 3px 3px 3px #cecdcd; 
 
    -moz-box-shadow: 3px 3px 3px #cecdcd; 
 
    -webkit-box-shadow: 3px 3px 3px #cecdcd; 
 

 
    text-align: center; 
 
    padding-right: 25px; 
 
} 
 

 
.add_idea_box_left { 
 
    float: left; 
 
    overflow: hidden; 
 
    width: 130px; 
 
    height: 200px; 
 
} 
 

 
.add_idea_box_left_top { 
 
    width: 100%; 
 
    padding: 15px 20px 20px 0px; 
 
} 
 

 
.add_idea_box_left_bottom { 
 
    width: 100%; 
 
    text-align: left; 
 
    padding-left: 22px; 
 
} 
 

 
.add_idea_box_left_bottom_row { 
 
    width: 100%; 
 
    height: 27px; 
 
    font-family: "Arial"; 
 
    font-size: 85%; 
 
    color: #363636; 
 
} 
 

 
.red_circle { 
 
    display: inline; 
 
    float: left; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 50%; 
 
    background-color: #ff5f57; 
 
    margin-right: 7px; 
 
} 
 

 
.yellow_circle { 
 
    display: inline; 
 
    float: left; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 50%; 
 
    background-color: #ffbd2e; 
 
    margin-right: 7px; 
 
} 
 

 
.green_circle { 
 
    display: inline; 
 
    float: left; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 50%; 
 
    background-color: #29cb41; 
 
    margin-right: 7px; 
 
} 
 

 
.add_idea_box_right { 
 
    overflow: hidden; 
 
    text-align: left; 
 
    min-height: 200px; 
 
    padding: 20px 0px 0px 25px; 
 
    border-left: solid 1px #bab6b6; 
 
} 
 

 
.add_idea_box_right_top { 
 
    overflow: visible; 
 
    width: 100%; 
 
} 
 

 
.add_idea_box_right_bottom { 
 
    overflow: hidden; 
 
    float: right; 
 
    height: 40px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
input[type=submit] { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 14px; 
 
    color: #ffffff; 
 
    padding: 10px 10px; 
 

 
    background: -moz-linear-gradient(
 
    top, 
 
    #fa8e00 0%, 
 
    #ab0000); 
 
    background: -webkit-gradient(
 
    linear, left top, left bottom, 
 
    from(#fa8e00), 
 
    to(#ab0000)); 
 

 
    border: 1px solid #7d0000; 
 

 
    -moz-box-shadow: 
 
    0px 1px 3px rgba(000,000,000,0.5), 
 
    inset 0px 0px 2px rgba(255,255,255,0.7); 
 
    -webkit-box-shadow: 
 
    0px 1px 3px rgba(000,000,000,0.5), 
 
    inset 0px 0px 2px rgba(255,255,255,0.7); 
 
    box-shadow: 
 
    0px 1px 3px rgba(000,000,000,0.5), 
 
    inset 0px 0px 2px rgba(255,255,255,0.7); 
 
    text-shadow: 
 
    0px -1px 0px rgba(000,000,000,0.4), 
 
    0px 1px 0px rgba(255,255,255,0.3); 
 
} 
 

 
input[type=text] { 
 
    width: 100%; 
 
    height: 20px; 
 
    padding: 10px 10px; 
 
    border: 1px solid #bab6b6; 
 
    -webkit-border-radius: 6px; 
 
    border-radius: 6px; 
 
    font-family: "Arial"; 
 
    color: #bab6b6; 
 
    background: #efeeee; 
 
} 
 

 
textarea { 
 
    width: 100%; 
 
    height: 60px; 
 
    padding: 10px 10px; 
 
    border: 1px solid #bab6b6; 
 
    -webkit-border-radius: 6px; 
 
    border-radius: 6px; 
 
    margin-top: 10px; 
 
    font-family: "Arial"; 
 
    color: #bab6b6; 
 
    background: #efeeee; 
 
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
<meta http-equiv="Content-Type" content="application/xml; charset=utf-8"> 
 
<meta name="viewport" content="initial-scale=1"> 
 
<html lang="en"> 
 
<head> 
 
<title>GroupTrades</title> 
 
<!-- CSS --> 
 
<link type="text/css" href="css/ideaboard2.css" rel="stylesheet" media="screen"> 
 
</head> 
 
<body> 
 

 
<!-- ADD AN IDEA BOX --> 
 
<div class="add_idea_box"> 
 
    <div class="add_idea_box_left"> 
 
    <div class="add_idea_box_left_top"> 
 
    </div> 
 
    <div class="add_idea_box_left_bottom"> 
 
     <div class="add_idea_box_left_bottom_row"> 
 
     <div class="green_circle"></div>5 accepted 
 
     </div> 
 
     <div class="add_idea_box_left_bottom_row"> 
 
     <div class="yellow_circle"></div>2 pending 
 
     </div> 
 
     <div class="add_idea_box_left_bottom_row"> 
 
     <div class="red_circle"></div>3 rejected 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="add_idea_box_right"> 
 
    <form method="post" action="dashboard.php"> 
 
     <div class="add_idea_box_right_top"> 
 
     <input type="hidden" name="group" value="<?echo $group;?>"> 
 
     <input type="text" name="title" value="Title" autofocus> 
 
     <textarea value="idea" id="idea">Idea</textarea> 
 
     </div> 
 
     <div class="add_idea_box_right_bottom"> 
 
     <input type="submit" id="Submit" name="Submit" value="Add Idea"> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div> 
 

 
<br><br><br> 
 

 
</body>

一個活版本是：http://quickid.net/test2/ideaboard2.html ...你可以看到輸入框和文本的右側盒子都被切斷，右邊框沒有顯示。

任何幫助將不勝感激。謝謝！

來源

2017-09-07 icydash

添加box-sizing屬性input和text-area和風格相應

CSS

.add_idea_box_right_top input[type="text"], 
.add_idea_box_right_top textarea{ 
box-sizing:border-box; 
}

希望這有助於..

來源

2017-09-07 03:19:53

這完美地工作，謝謝！ – icydash

這是因爲你設置的所有這些屬性的input元素：

寬度：100％
填充：10px的
邊界：2px的

所以input元素佔據了100％的寬度，它也也有10px填充左右兩邊的頂部和2px邊界頂部的t帽子。它們全部相加，因此元素的總寬度大於包含元素的寬度的100％。

來源

2017-09-07 03:11:30 Matt

試着修改這個類的填充，所以試試這個。

從本：

.add_idea_box_right { 
    overflow: hidden; 
    text-align: left; 
    min-height: 200px; 
    padding: 20px 0px 0px 25px; 
    border-left: solid 1px #bab6b6; 
}

這樣：

.add_idea_box_right { 
overflow: hidden; 
text-align: left; 
min-height: 200px; 
padding: 20px 25px 0px 25px; 
border-left: solid 1px #bab6b6; 
}

讓我知道，如果它幫你。

來源

2017-09-07 03:12:09 jhek

這是因爲建議的100％寬度會干擾某些填充，將寬度減小到較小的百分比，並將輸入字段居中，以使其隨着分辨率的提高而擴大。

編輯：如果您檢查mozilla上的元素，您可以清楚地看到與pick元素髮生重疊的地方！

來源

2017-09-07 03:17:29 user2530107

輸入框被切斷

回答

相關問題