javascript - 如何让嵌套的CSS元素的宽度都一样？

Question

下面是我创建的一些 HTML 和 CSS 的实现。我在设置容器 div 中某些按钮的宽度时遇到问题。我想要它，这样我就可以始终确保按钮元素的 width 始终是它所在的 div 的 50%。这是我想要重新创建的图像:

https://s3.amazonaws.com/f.cl.ly/items/2z3C3Z0L2Q0R282p1V0z/Image%202014-12-19%20at%2010.07.09%20AM.png

这是我的尝试:

/* 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 和 提供输入 类。我不一定要在此处对宽度进行硬编码以使其正确对齐。相反，如果有一种编程方式，我可以将它们设置为父 div 的 width: 50%，而不是对宽度进行硬编码，那就太好了。我尝试设置类 .give {width: 100%} 然后设置 .giving-input, .give-button, .save-button, .share-button: {width : 50%} 但这对我不起作用。任何提示或帮助将不胜感激。谢谢!

Answer 1

如果您将所有输入/按钮宽度设置为 49% 并删除 margin-left 一切都应该可以正常工作(我还从 inline-block 回到 block 以确保它占据 100% 的宽度)。

这是对您的代码的修复:

/* 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: 49%;
  font-weight: bold;
  padding: 10px;
}

.give {
    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: 49%;
}

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>