Question

我在两个页面上有两个按钮，它们应该看起来完全一样，但它们没有。它们也具有相同的CSS样式。我相信其中一个按钮正在被它周围的物体压缩，但是我无法确定导致这个因素的部分。如果你能帮我找到一个带有额外CSS的解决方案，或者向我解释一下我应该删除哪一部分？

编辑：对不起，我没有完全澄清。这些按钮的大小不同。这与按钮的边距无关，但为了参数，我将删除内联的那些部分。按钮是两个不同的尺寸，这就是我的问题。

此按钮看起来正确：

.submitbutton {
  display: block;
  /* inline for text and button */
  border: 0.1em;
  border-radius: 0.5em;
  background-color: #e6e5e5;
  width: 14em;
  height: 3.5em;
  outline-color: #C0C0C0;
  text-align: center;
  text-decoration: none;
  color: #84A0B1;
  font-size: 0.7em;
}

<div style="display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
  <div style="-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
    <h3 class="locations" style="display: block" ">dana point</h3>
                            <p class="locations " style = "display: block ">34241 E. Pacific Coast Hwy, Ste. 201 <br> Dana Point, CA 92629 </p>
                        </div>
                        <button type="button " class="locations submitbutton " name="danaPoint " id = "dana point "><span class = "buttonText ">select</span></button>   
          	  	    </div>

此按钮格式不正确：

.submitbutton{
   
    display: block;  /* inline for text and button */
    
    border: 0.1em; 
    border-radius: 0.5em;
    background-color: #e6e5e5; 
    width: 14em; 
    height: 3.5em;
    outline-color: #C0C0C0;
    
    
    text-align: center;
    text-decoration: none;
    color: #84A0B1;
    font-size: 0.7em;
}

  <div style = "margin-left: 1em; font-size: 0.8em; margin-right: 2em; display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
           		        <i style = "margin: 0.5em" class="fa fa-credit-card" aria-hidden="true"></i><p style = "margin: 0.9em">$49 </p>
                        <i style = "margin: 0.5em" class="fa fa-clock-o" aria-hidden="true"></i><p style = "margin: 0.5em; min-width: 4em"> 20m</p>
                        <button type="button" class="sugars submitbutton hidden" name="brazilian" ><span class = "buttonText">find a time</span></button>
                    </div>

另外请告诉我是否有任何方法可以更好地解决这个问题，因为我之前已经处理过正确提问的问题，而且这次我试图更好地遵循指南。

谢谢！

Answer 1

您有两种不同的内联样式

从第一个开始

style = "width: 10em; margin-right: 2em "

来自第二个

style = "margin-right: 1em; margin-left: auto"

内联样式覆盖外部文件或样式部分中的css样式

Answer 2

.submitbutton{
   
    display: block;  /* inline for text and button */
    
    border: 0.1em; 
    border-radius: 0.5em;
    background-color: #e6e5e5; 
    width: 14em; 
    height: 3.5em;
    outline-color: #C0C0C0;
    
    
    text-align: center;
    text-decoration: none;
    color: #84A0B1;
    font-size: 0.7em;
}

<!-- The buttons were showing differently because of the inline-styles within the html are different-->
<!-- I change the inline styles so the buttons show as the same-->

<div id="first-btn">
 
   <div style = "margin-left: 1em; <!--font-size: 0.8em;--> margin-right: 2em; display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
           		        <i style = "margin: 0.5em" class="fa fa-credit-card" aria-hidden="true"></i><p style = "margin: 0.9em">$49 </p>
                        <i style = "margin: 0.5em" class="fa fa-clock-o" aria-hidden="true"></i><p style = "margin: 0.5em; min-width: 4em"> 20m</p>
                        <button type="button" class="sugars submitbutton hidden" name="brazilian" style = " width: 10em; margin-right: 2em; margin-left: auto" ><span class = "buttonText">find a time</span></button>
                    </div>
</div><!--/ #first-btn -->

<div id="second-btn">
  <div style="display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
  <div style="-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
    <h3 class="locations" style="display: block" ">dana point</h3>
                            <p class="locations " style = "display: block ">34241 E. Pacific Coast Hwy, Ste. 201 <br> Dana Point, CA 92629 </p>
                        </div>
                        <button type="button " style = "width: 10em; margin-right: 2em " class="locations submitbutton " name="danaPoint " id = "dana point "><span class = "buttonText ">select</span></button>   
          	  	    </div>
</div><!--/ #second-btn-->

为什么这两个按钮的尺寸不一样？

2 个答案: