Question

感谢您提前提供任何帮助。我想这很简单，但我不明白按钮应该在右下角，边框不应该是疯狂的。

我说在标题中漂浮，但这只是为了澄清事情。我很确定这不是我应该怎么做的。

继承我的HTML：

<div class="boxtest1">
    <div id="sbts">
        TeamSpeak³
    </div>
    <div id="sbtsinfo">
        some text here <br> some more text <br> some more text
    </div>
    <div id="sbtsbutton">
        <a href="ts3server://xxxxx">Join</a>
    </div>
</div>

CSS：

.boxtest1 {
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  width: 38%;
  border: 4px solid #ff5857;
  border-radius: 0px 40px 0px 40px;
  background: rgba(255,88,87,0.2);
}
#sbts {
  text-align: center;
  font-size: 2em;
  color: #BDBDBD;
  border-bottom: 2px dotted #ff5857;
}
#sbtsinfo {
  text-align: left;
  font-size: 1em;
  color: #BDBDBD;
  border-bottom: 2px dotted #ff5857;
}
#sbtsbutton {
  direction: rtl;
  font-size: 1.5em;
  margin: 2px;
  padding: 2px;
  border: 2px solid #ff5857;
  border-radius: 0px 20px 0px 20px;
}
#sbtsbutton a {
  text-decoration: none;
  color: #BDBDBD;
}
#sbtsbutton:hover {
  background: #228822;
}

http://codepen.io/6P14y3r/pen/ZaEKag

对不起，如果我的英语不好^。^

Answer 1

如果您将overflow: hidden;添加到父级的CSS并将clear: both; float: right添加到孩子的CSS中，它应该可以解决您的问题：）

Answer 2

如果我理解正确，你应该在.boxtest1中添加display：table，在#sbtsbutton中添加右边：右边

.boxtest1 {
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  width: 38%;
  border: 4px solid #ff5857;
  border-radius: 0px 40px 0px 40px;
  background: rgba(255,88,87,0.2);
  display: table;
}
#sbtsbutton {
  direction: rtl;
  font-size: 1.5em;
  margin: 2px;
  padding: 2px;
  border: 2px solid #ff5857;
  border-radius: 0px 20px 0px 20px;
  float: right;
}

Answer 3

如果我确定你试图获得与连接文本相同的边框，请看这个片段，

＆＃13;

<div class="boxtest1">
    <div id="sbts">
        TeamSpeak³
    </div>
    <div id="sbtsinfo">
        some text here <br> some more text <br> some more text
    </div>
    <div id="sbtsbutton">
        <a href="ts3server://xxxxx">Join</a>
    </div>
</div>

＆＃13;

<a href="http://example.com/catdin/generate">GO TO DYNAMIC CATALOG GENERATOR</a>

＆＃13;

Answer 4

用这个css替换你的css：

.boxtest1 {
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  width: 38%;
  border: 4px solid #ff5857;
  border-radius: 0px 40px 0px 40px;
  background: rgba(255,88,87,0.2);
}
#sbts {
  text-align: center;
  font-size: 2em;
  color: #BDBDBD;
  border-bottom: 2px dotted #ff5857;
}
#sbtsinfo {
  text-align: left;
  font-size: 1em;
  color: #BDBDBD;
  border-bottom: 2px dotted #ff5857;
}
#sbtsbutton {
  direction: rtl;
  padding:20px 15px;
}
#sbtsbutton a {
  text-decoration: none;
  color: #BDBDBD;
  font-size: 1.5em;
  margin: 2px;
  padding: 2px;
  border: 2px solid #ff5857;
  border-radius: 0px 20px 0px 20px;

}
#sbtsbutton a:hover {
  background: #228822;
}

Answer 5

如果我找到你，那就这样做以获得更好的设计

<div class="boxtest1">
    <div id="sbts">
        TeamSpeak³
    </div>
    <div id="sbtsinfo">
        some text here <br> some more text <br> some more text
    </div>
    <div id="sbtsbutton">
        <a href="ts3server://xxxxx">Join</a>
    </div>
</div>

＆＃13;

 
   .boxtest1 {
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  width: 38%;
  border: 4px solid #ff5857;
  border-radius: 0px 40px 0px 40px;
  background: rgba(255,88,87,0.2);
/*my changes*/
  float:left;
  margin-left: 31%;
}
#sbtsbutton {
  direction: rtl;
  
  font-size: 1.5em;
  margin: 2px;
  padding: 2px;
  border: 2px solid #ff5857;
  border-radius: 0px 20px 0px 20px;
/*my changes*/
  float:right;
  padding:5px 20px;
}

＆＃13;

＆＃34;浮动＆＃34;右边的文字（带边框）并留在它的父div中

5 个答案: