0
下面是我創建的一些HTML和CSS的實現。我在容器div中的某些按鈕的寬度有問題。我希望它這樣，不知怎的，我總能保證按鈕元素的width始終，它是在div什麼50％，這是我想重新創建圖像：如何讓嵌套CSS元素的寬度都一樣？
這裏是我的嘗試：
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 100px;
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 100px;
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<a href=""><i>Why give $50?</i></a>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>我遇到的問題是與save-button和share-button，也是give-button和giving-input類。我不一定要在這裏對寬度進行硬編碼，以使它們正確對齊。相反，如果存在編程方式，以便我可以將它們設置爲父div的width: 50%，而不是對寬度進行硬編碼。我試圖設置類.give {width: 100%}，然後設置.giving-input, .give-button, .save-button, .share-button: {width: 50%}但這不適合我。任何提示或幫助將不勝感激。謝謝！
做Java腳本會做什麼？你可以設置發件箱div寬度的一半，甚至認爲你的箱子在div之外。 – Obink