Question

我有两个div标签。在style.css文件中，我为按钮和按钮跨度设置了属性。我想要的结果是，当我在2 div标签中创建2个按钮时，它会产生2行。但是当我在每个div中制作2个按钮时，它总是变成一行。我还为按钮和按钮范围设置了display: block，但仍未得到正确的结果。

    .button {
      display: block;
      border-radius: 4px;
      background-color: #f4511e;
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 18px;
      padding: 15px;
      width: 200px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
    }
    
    .button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    
    .button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
      white-space: pre;
    }
    
    .button:hover span {
      padding-right: 30px;
    }
    
    .button:hover span:after {
      opacity: 1;
      right: 0;
    }
    button:focus {
      outline:0;
    }
    
    div {
      float: right;
    }

<!DOCTYPE html>
    <html style=''>
    <head>
    <link rel="stylesheet" href="styles.css">	  
    </head>
    <body style="width:550px;">
    <div id='message' style="display: none;"></div>
    <div id="hdqual"><button class='button'><span>Button 1</span></button></div>
    <div id="sdqual"><button class='button'><span>Button 2</span></button></div>
    </body>
    </html>

Answer 1

.button {
  display: block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 15px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  white-space: pre;
}

.button:hover span {
  padding-right: 30px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
button:focus {
  outline:0;
}

.outer {
  float: right;
}

<html style=''>
<head>
<link rel="stylesheet" href="styles.css">     
</head>
<body style="width:550px;">
<div id='message' style="display: none;"></div>
<div class="outer">
<div id="hdqual"><button><span>Button 1</span></button></div>
<div id="sdqual"><button><span>Button 2</span></button></div>
</div>
</body>
</html>

如果你将一个外部div放在2个按钮周围并向右浮动它也可以。

Answer 2

尝试删除＆＃34; div {float：right; }＆＃34; 并且div将在不同的行中，因为您为所有div定义了样式，它们将始终位于同一行。

Answer 3

添加宽度只需一件事：100％;并显示：block;

＆＃13;

.button {
  display: block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 15px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  white-space: pre;
}

.button:hover span {
  padding-right: 30px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

button:focus {
  outline: 0;
}

div {
  clear:both;
}

＆＃13;

<!DOCTYPE html>
<html style=''>

  <head>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body style="width:550px;">
    <div id='message' style="display: none;"></div>
    <div id="hdqual">
      <button class='button'><span>Button 1</span></button>
    </div>
    <div id="sdqual">
      <button class='button'><span>Button 2</span></button>
    </div>
  </body>

</html>

＆＃13;

防止两个div成为一行

3 个答案: