当放大时，Div会不断溢出到其他元素上

时间：2018-04-21 18:59:27

标签： html css responsive-design responsive

我正在尝试制作一个带有搜索栏和帐户菜单的小网页（目前只是一个圆圈），但我注意到，当我放大或调整页面大小时，帐户菜单溢出到搜索栏。我已经尝试从绝对定位改为相对并相应地调整right: 30px，但这不起作用。我非常困难，任何人都可以提供任何建议/代码吗？

body {
  font-family: "PT-Sans", sans-serif;
  background-color: #bbb;
}
input:focus {
  outline: none;
}
.search-btn {
  border: none;
  padding: 12px;
  font-size: 18px;
  background-color: #009AFF;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  color: white;
  width: 70px;
  position: relative;
  right: 5px;
  cursor: pointer;
}
.input {
  width: 500px;
  padding: 11px;
  font-size: 18px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 1px solid #777;
}
.search {
  width: 600px;
  position: absolute;
  left: 200px;
  top: 15px;
}
.logo a {
  color: #009AFF;
  font-size: 38px;
  text-decoration: none;
}
.logo {
  position: absolute;
  left: 0;
  top: 12px;
  width: 200px;
}
.content {
  width: 300px;
  border: 2px solid #eee;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  top: 65px;
  padding: 5px;
}
#account-items {
  display: none;
  background-color: #fff;
  width: 300px;
  border: 2px solid #eee;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  position: absolute;
  right: 0px;
  top: 72px;
  padding: 5px;
}
/*.accounts:hover #account-items {
  display: inline;
}*/
#account-items a {
  color: #009AFF;
  text-decoration: none;
  display: block;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
#account-items a:hover {
  background-color: #eee;
}
.accounts {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 66px;
  height: 66px;
  top: 4px;
  padding: 0px;
  border-radius: 100%;
}
.accounts .image {
  background-image: url("/email/scripts/profile.png");
  background-size: 100%;
  background-repeat: no-repeat;
  border: 1px solid #777;
  border-radius: 100%;
  width: 63px;
  height: 63px;
}
a {
  color: #009AFF;
  text-decoration: none;
}
.js-is-hidden {
	display: none;
}
<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <div id="body">
    <div class="header">
      <div class="logo">
        <center><a href="#">Unnamed</a></center>
      </div>
      <div class="search">
        <form action="search.php" method="GET">
          <input type="text" name="q" class="input" autocomplete="off" />
          <button type="submit" class="search-btn">Go</button>
        </form>
      </div>
      <div class="accounts">
        <div class="image">
        </div>
        </div>
      </div>
    </div>

2 个答案:

答案 0 :(得分：0)

如果删除绝对定位并坚持使用默认相对值，则使用inline-block的显示（阅读它在此处执行的操作：https://www.w3schools.com/css/css_inline-block.asp）并使用动态宽度而不是静态宽度，你应该得到你想要的结果。

请参阅下面的更新代码; 

body {
  font-family: "PT-Sans", sans-serif;
  background-color: #bbb;
}
input:focus {
  outline: none;
}
.search-btn {
  border: none;
  padding: 12px;
  font-size: 18px;
  background-color: #009AFF;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  color: white;
  width: 70px;
  position: relative;
  right: 5px;
  cursor: pointer;
}
.input {
  width: calc(100% - 100px); /* CHANGED */
  padding: 11px;
  font-size: 18px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 1px solid #777;
}
.search {
  max-width: 600px; /* CHANGED */
  width: calc(100% - 300px); /* ADDED */
  /* position: absolute; REMOVED */
  /* left: 200px; REMOVED */
  /*top: 15px; REMOVED */
  display: inline-block; /* ADDED */
  vertical-align: middle; /* ADDED */
}
.logo a {
  color: #009AFF;
  font-size: 38px;
  text-decoration: none;
}
.logo {
  /*position: absolute; //REMOVED */
  /*left: 0; //REMOVED */
  display: inline-block; /* ADDED */
  vertical-align: middle; /* ADDED */
  top: 12px;
  width: 200px;
}
.content {
  width: 300px;
  border: 2px solid #eee;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  top: 65px;
  padding: 5px;
}
#account-items {
  display: none;
  background-color: #fff;
  width: 300px;
  border: 2px solid #eee;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  position: absolute;
  right: 0px;
  top: 72px;
  padding: 5px;
}
/*.accounts:hover #account-items {
  display: inline;
}*/
#account-items a {
  color: #009AFF;
  text-decoration: none;
  display: block;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
#account-items a:hover {
  background-color: #eee;
}
.accounts {
  cursor: pointer;
  /* position: absolute; REMOVED */
  /* right: 30px; REMOVED */
  width: calc(100% - 809px); /* CHANGED */
  height: 66px;
  /* top: 4px; REMOVED */
  padding: 0px;
  border-radius: 100%;
  display: inline-block; /* ADDED */
  vertical-align: middle; /* ADDED */
  text-align: right; /* ADDED */
}
.accounts .image {
  background-image: url("/email/scripts/profile.png");
  background-size: 100%;
  background-repeat: no-repeat;
  border: 1px solid #777;
  border-radius: 100%;
  width: 63px;
  height: 63px;
  display: inline-block; /* ADDED */
}
a {
  color: #009AFF;
  text-decoration: none;
}
.js-is-hidden {
	display: none;
}
<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <div id="body">
    <div class="header">
      <div class="logo">
        <center><a href="#">Unnamed</a></center>
      </div>
      <div class="search">
        <form action="search.php" method="GET">
          <input type="text" name="q" class="input" autocomplete="off" />
          <button type="submit" class="search-btn">Go</button>
        </form>
      </div>
      <div class="accounts">
        <div class="image">
        </div>
        </div>
      </div>
    </div>

答案 1 :(得分：0)

试试这个

.header {
    position: relative;
    min-width: 900px;
}

https://jsfiddle.net/59ncte3m/1/

通过使标题成为定位元素，菜单绝对位置将相对于标题，这将避免在搜索之上绘制菜单的问题。给它一个最小宽度将确保所有元素都适合。

这仍然不是一个好的响应设计，因为它应该避免像素尺寸，但它足以解决溢出的问题。

相关问题
最新问题