0
以下は私が作成したHTMLとCSSの実装です。私はコンテナ内のいくつかのボタンの幅に問題がありますdiv。ここでネストされたCSS要素の幅をすべて同じにするにはどうすればいいですか？
私です：どういうわけか、私はいつも、ボタン要素のwidthは、それがであるdiv要素は、これは私が再作成したかった画像であるものの50％が常にあることを確認することができるように、私はそれをしたいです試み：
/* 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クラス。私は必ずしもハードコーディングして、正しく整列させるようにしたいとは限りません。むしろ、プログラムの方法があれば、親のwidth: 50%に設定することができます。これは、幅広いコードをハードコーディングするのではなく、divです。私はクラス.give {width: 100%}を設定しようとして.giving-input, .give-button, .save-button, .share-button: {width: 50%}を設定しましたが、それは私のためには機能しませんでした。任意のヒントや助けをいただければ幸いです。ありがとう！あなたは49%に幅がすべての入力/ボタンを設定し、margin-leftあなたはすべてが動作するはずがなかったを削除した場合
は、Javaスクリプトがどうなるのか？あなたのボックスがdivの外にあったとしても、送信トレイのdivの幅の半分を設定することができます。 – Obink