Question

我有以下HTML：

<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

我的css：

<div className={`page-header-profile-photo-container`}>
    <div className="user-picture">
    </div>
    <div className="user-name">
       <p>Sample GmbhH</p>
    </div>
</div>

这呈现如下：

我希望在圆形div和文本之间有一些空格。 page-header-profile-photo-container的位置必须是绝对的。

我该如何解决这个问题？

Answer 1

首先纠正您的语法，例如className到class，然后尝试以下代码。 position:absolute类

中无需user-name

  .page-header-profile-photo-container{
    width: 200px;
    position: absolute;
    top: 10%;
    right: 130px;

  }
  .user-picture {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #787567;
    display: inline-block;
    vertical-align: middle;
  }
  .user-name{
    display: inline-block;
    vertical-align: middle;
  }

<div class=page-header-profile-photo-container>
    <div class="user-picture">
    </div>
    <div class="user-name">
       <p>Sample GmbhH</p>
    </div>
</div>

Answer 2

请勿在用户名中使用绝对定位。绝对定位将物品置于特定位置，无论什么（不关心它是否重叠）

Answer 3

使用flex-box它对我有用。希望这有帮助。

＆＃13;

.page-header-profile-photo-container{
  background-color: #f5f5f5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
    position: absolute;
    height: 50px;
    top: 10%;
    right: 130px;
    padding: 5px 10px;
    width: 200px;

  }
  .user-picture {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /*background-color: #787567;*/
  }
  .user-picture img{
    border-radius: 50%;
    display: block;
    height: auto;
    max-width: 100%;
  }
  .user-name{
    font-size: 15px;
  }

＆＃13;

<div class=page-header-profile-photo-container>
    <div class="user-picture">
      <img src="http://placehold.it/40x40" alt="Profile Picture" />
    </div>
    <div class="user-name">
       <p>Sample GmbhH</p>
    </div>
</div>

＆＃13;

CSS安排两个div彼此相邻

3 个答案: