如何更好地格式化带有按钮的div？

时间：2018-09-21 14:50:25

标签： html css

我要去三个div。一个是一个容器，然后另外两个是放置一些按钮的！但这看起来并不正确。我不太确定如何解决

.button {
  display: inline-block;
  padding: 20px 30px;
  font-size: 12px;
  cursor: pointed;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #AB0002;
  border: none;
  border-radius: 15px;
}

.divButton {
  height: 100%;
  width: 100%;
  background-color: #e4e4e4;
  display: inline-block;
  padding-bottom: 5px;
}
HTML:

<div class="divButton">
  <p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
  <!--2 buttons "centered"-->
  <div style="float: left; padding-left: 325px;">
    <p style="padding-left: 72px;">Centered text above button</p>
    <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
    <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
  </div>
  <!--add spacing to move away from 2 buttons-->
  <div style="float: left; padding-left: 125px;">
    <p style="padding-left: 40px;">TEXT</p>
    <a href="link.html"><button class="button" style="float: right;">TEXT</button></a>
  </div>
</div>

jsfiddle：https://jsfiddle.net/3ar1L0zy/1/

我正在尝试以绘画形式实现！

buttons

5 个答案:

答案 0 :(得分：1)

我将不再使用浮点数-css已经进行了足够的移动，因此您不再需要使用它们。

改用flex：

.button {
  display: inline-block;
  padding: 20px 30px;
  font-size: 12px;
  cursor: pointed;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #AB0002;
  border: none;
  border-radius: 15px;
}

.divButton {
  width: 100%;            /* you don't really need this - divs are block elements which are 100% by default */
  background-color: #e4e4e4;
  padding: 0 20px 5px 20px;
  box-sizing: border-box;  /* as you have set the width, you need this to stop the div being 100% + 40px wide */
  
  display:flex;   /* this will align items in a row by default */
  flex-wrap:wrap; /* this allows the content to wrap to multiple rows */
  justify-content:space-between;  /* this will push any content to either side of the row */
}

.divButton > p {
  width:100%;    /* make this take up full row */
}

.divButton > div {
    text-align:center;  /* use this to centre text - not padding */
}
<div class="divButton">
  <p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
  <!--2 buttons "centered"-->
  <div>
    <p>Centered text above button</p>
    <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
    <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
  </div>
  <!--add spacing to move away from 2 buttons-->
  <div>
    <p>TEXT</p>
    <a href="link.html"><button class="button">TEXT</button></a>
  </div>
</div>

我要给你的另一个技巧是尝试不要使用内联样式-它们变得很难维护并且也使得调试变得更加困难（并且由于要重复样式的代码而不是仅仅使用样式，因此会导致文件更大）一个可以多次使用但只能编程一次的类）

答案 1 :(得分：0)

除了在两个div上都使用float之外，还可以在右侧的div上使用right并删除设置的左填充：

<div class="divButton">
    <p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
    <!--2 buttons "centered"-->
    <div style="float: left;">
        <p style="padding-left: 72px;">TEXT</p>
        <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
        <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
    </div>
    <!--add spacing to move away from 2 buttons-->
    <div style="float: right;">
        <p style="padding-left: 40px;">TEXT</p>
        <a href="link.html"><button class="button" style="float: right;">TEXT</button></a>
    </div>
</div>

https://jsfiddle.net/3ar1L0zy/13/

您也可以通过使用flexbox实现此目的。 （更好的解决方案）

答案 2 :(得分：0)

HTML代码：

<div class="divButton">
    <h3 style="text-align: center; padding-top: 15px; color: black;">TEXT!</h3>
    <!--2 buttons "centered"-->
    <div class="divText">
        <p style="padding-left: 72px;">TEXT</p>
    <p style="padding-left: 40px;">TEXT</p>
    </div>
    <!--add spacing to move away from 2 buttons-->
    <div>
    <div class="divButtons">
    <div>
      <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
          <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
    </div>
        <a href="link.html"><button class="button">TEXT</button></a>
    </div>
    </div>
</div>

CSS代码：

.button {
        display: inline-block;
        padding: 20px 30px;
        font-size: 12px;
        cursor: pointed;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #AB0002;
        border: none;
        border-radius: 15px;
    }

    .button:hover {
        background-color: #880002;
    }

    .divButton {
        height: 100%;
        width: 100%;
        background-color: #e4e4e4;
        display: inline-block;
        padding-bottom: 5px;
    }
  .divText {
    display: flex;
    justify-content: space-around;
  }
  .divButtons {
    display: flex;
    justify-content: space-around;
  }

答案 3 :(得分：0)

我会推荐flexbox 

.parent{
  background: tomato;
  width: 400px;  
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.header{
  background: yellow;
  text-align: center
}
.body{
  background: green;
  width: 100%;
  display: flex;
}
.body-item{
  background: pink;
  width: 50%;
  text-align: center;
  padding: 10px;
}
.blue{
  background: blue; /* to make it easier to see */
}
.buttons{  
  display: flex;
  flex-wrap: wrap; /* wrap items onto multiple lines if needed, from top to bottom*/
  justify-content: space-evenly; /* items are distributed so that the spacing between any two items (and the space to the edges) is equal */
}
<div class="parent">
  <h3 class="header">HEADER TEXT</h3>
  <section class="body">
      <div class="body-item">
        <div class="text">Text</div>
        <div class="buttons">
           <button>Button</button>
           <button>Button</button>
        </div>
      </div>
      <div class="body-item blue">
         <div class="text">Text</div>
        <div class="buttons">
           <button>Button</button>
        </div>
      </div>
  </section>
</div>

答案 4 :(得分：0)

<div class="divButton" style="text-align: center;">
    <p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
    <div style="display: inline-block;">
      <!--add spacing to move away from 2 buttons-->
      <div style="float: right; display: inline-block; padding-left: 125px;">
        <p style="text-align: center;">TEXT</p>
        <a href="link.html"><button class="button" style="float: right;">TEXT</button></a>
      </div>
      <!--2 buttons "centered"-->
      <div style="display: inline-block;">
        <p style="text-align: center;">TEXT</p>
        <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
        <a href="link.html" target="_blank"><button class="button">TEXT</button></a>
      </div>
    </div>
</div>

https://jsfiddle.net/3ar1L0zy/85/

相关问题
最新问题