边框仅显示在html的侧面

时间：2019-10-02 19:44:30

标签： html css

当我尝试在网站上的div元素中添加边框时，出现了这些奇怪的边框。

Weird CSS Borders

这是我一直在寻找的结果： intended result

HTML 

<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>

CSS 

.outlined-button
{
 border: 3px solid #fff;
 border-radius: 10px;
 box-sizing: border-box;
 height: 48px;
 width: 140px;
}
.outlined-button-text
{
 color: #fff;
 font-family: Roboto;
 font-style: normal;
 font-weight: bold;
 font-size: 24px;
 line-height: 28px;
}

5 个答案:

答案 0 :(得分：2)

产生边界的原因是const volatile元素具有内联流，而封闭的a元素具有p行为。内联元素没有继承的宽度，这会使border属性认为该元素的宽度为0 px，并在它认为该元素所在的位置放置了边框。

解决方案的一种解决方法是将display block用作链接元素（https://jsfiddle.net/qtdz296j/1/）

我还附上了替代解决方案：

display: block
body {
    background: #162CEA;
    padding: 2rem 1rem;
}

.heading {
  color: #FFF;
}

.button {
  padding: .5rem 1rem;
  border-radius: .5rem;
}

.filled-button {
  background: #FFF;
}

.outline-button {
  border: 3px solid #FFF;
  color: #FFF;
}

答案 1 :(得分：1)

如果没有其余的CSS和HTML，就什么也说不出来。您的帖子从规则的中间开始。我会尝试使用它，看看您可以更改什么。确保您的CSS正在影响您希望影响的元素。

编辑：尝试将按钮内的http://hello.com/bird.65c8b9bce67b6a965a9c.png标签更改为<p>。或者更好的是，不要将它们包含在任何内容中，只需直接为按钮文本设置样式即可。我也极力建议您正确使用<span>与<button>。当按钮实际上是 button 时，使按钮正常工作要容易得多。但是将<a>更改为<p>之类的内联元素将解决您的直接问题。

答案 2 :(得分：0)

如果您只需要在该div周围添加边框，则可以使用该功能。稍微清理一下，然后添加一个丢失的;。它有很多嵌套的类，您只需要定位正确的类即可。这个只有2个div，因此，如果您在谈论外部/父div，则只需指定一个ID并将其作为目标即可。享受吧！

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>

    <script>
      // Your web app's Firebase configuration
      var firebaseConfig = {
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
</head>
<body>
    <div>
        <h1 class="headline">hey</h1>
        <div class="buttons">
            <a class="filled-button"><p class="filled-button-text">sign up</p></a>
            <a class="outlined-button"><p class="outlined-button-text">log in</p></a>
        </div>
    </div>
</body>

<style>
body {
    background: #162CEA;
}
.headline {
    width: 34%;
    margin-top: 15%;
    margin-left: 15%;
    margin-bottom: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 64px;
    line-height: 75px;
    color: #FFFFFF;
}
.filled-button-text {
    display: table-cell;
    vertical-align: middle;
}
.filled-button {
    float: left;
    width: 140px;
    height: 48px;
    margin-left: 15%;
    background: #FFFFFF;
    border-radius: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    color: #000000;
    display: table;
    text-align: center;
}
.outlined-button {
    width: 140px;
    height: 48px;
    box-sizing: border-box;
}
.outlined-button-text {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    color: #FFFFFF;
}
.buttons {
    border: 2px solid black;
}
</style>
</html>

答案 3 :(得分：0)

您可以使用此代码

body {
            margin: 0;
            padding: 0;
            font-family: Roboto;
            background-color: #162cea;
        } 
        .headline {
            text-align: center;
            color: #ffffff;
        }
        .buttons {
            padding: 30px;
            margin: 0 auto;
            text-align: center;
        }
        .filled-button {
            border-radius: 10px;
            color: #000000;
            font-weight: bold;
            font-size: 30px;
            height: 55px;
            width: 140px;
            background-color: #ffffff;
            display: inline-block;
            cursor: pointer;
            margin: 0 10px 0 0;
            padding: 0;
        }
        .filled-button .filled-button-text {
            margin: 0;
            padding: 9px;
        }
        .outlined-button {
            border-radius: 10px;
            color: #ffffff;
            font-weight: bold;
            font-size: 30px;
            height: 52px;
            width: 140px;
            background-color: #162cea;
            display: inline-block;
            border: 3px solid #ffffff;
            cursor: pointer;
            margin: 0 0 0 10px;
            padding: 0;
        }
        .outlined-button .outlined-button-text {
            margin: 0;
            padding: 9px;
        }
<div>
        <h1 class="headline">hey</h1>
        <div class="buttons">
            <a class="filled-button"><p class="filled-button-text">sign up</p></a>
            <a class="outlined-button"><p class="outlined-button-text">log in</p></a>
        </div>
    </div>

答案 4 :(得分：0)

Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.


body {
  background: #162CEA;
}

.headline {
  width: 34%;
  margin-top: 15%;
  margin-left: 15%;
  margin-bottom: 10px;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 64px;
  line-height: 75px;
  color: #FFFFFF;
}

.button {
  width: 100%;
  text-align: center;
}

.filled-button-text,
.outlined-button-text {
  display: block;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 1.75em;
  line-height: 2.25em;
  width: 100%;
  text-align: center;
}

.outlined-button-text {
  color: #FFFFFF;
}

.filled-button {
  background: #FFFFFF;
}

.filled-button,
.outlined-button {
  width: 49%;
  display: inline-block;
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  display: inline-block;
  border-radius: 0.5em;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {};
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</head>

<body>
  <div>
    <h1 class="headline">hey</h1>
    <div class="buttons">
      <a class="filled-button">
        <span class="filled-button-text">sign up</span>
      </a>
      <a class="outlined-button">
        <span class="outlined-button-text">log in</span>
      </a>


    </div>
  </div>
</body>

</html>

相关问题
最新问题