文章/答案/技术大牛

发布

社区首页 >问答首页 >使用CSS和HTML对齐项问题

问使用CSS和HTML对齐项问题
EN

Stack Overflow用户

提问于 2021-05-11 04:29:31

回答 3查看 97关注 0票数 2

我有一个基本的问题，但不是我的基本问题。我面临一个问题，以对齐div和删除一些额外的间隔。我很喜欢屏幕截图。一个显示现在的设计外观，另一个显示删除在红色框中标记的额外空间，并将右大部分div对齐到左div的底部和顶部。

或者，如果有人能解释什么是实现这一目标的最佳方法

任何帮助都是非常感谢的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <div class="mainContainer">
        <div class="topSection pd-10">
            <div class="pd-10">
                <div class="topBar">
                    <input type="text" value="36 pt">
                    <input type="text" value="Auto">
                    <div class="box">
                        <div class="leftAlign"></div>
                    </div>
                    <div class="box">
                        <div class="centerAlign"></div>
                    </div>
                    <div class="box">
                        <div class="rightAlign"></div>
                    </div>
                    <div>
                        <div class="circle"></div>
                    </div>
                </div>
                <div>
                    <textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
                </div>
            </div>
            <div>
                <div class="flexContainer">
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                    <div class="iconBox mg-5 ">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                </div>
                <div class="flexContainer">
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="mg-10 box">
                    <div class="logoUp"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoLeft"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoRight"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoDown"></div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body {
    background-color: #262626;
    color: #c7c7c7;
    font-family: lucidagrande;
    /* font-size: 11px; */
    font-weight: 400;
}

input[type=text] {
    background-color: #262626;
    border-color: #525252;
    color: #c7c7c7;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    width: 10%;
    text-align: center;
}

textarea {
    background-color: #262626;
    border-color: #525252;
    color: #c7c7c7;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    /* width: 95%; */
}


/* .topSection {
    padding: 10px;
} */

.topSection>div,
.leftSection {
    display: inline-block;
    background-color: #323232;
}

.flexContainer {
    display: flex;
    flex-wrap: nowrap;
    margin: 10px;
}

.box {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    width: 16px;
    text-align: center;
    border-style: solid;
    border-width: 2px;
}

.topBar {
    margin-bottom: 15px;
    margin-top: 5px;
}

.topBar>div {
    display: inline-block;
    vertical-align: bottom;
}

.leftAlign {
    background: url(../images/leftAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.centerAlign {
    background: url(../images/centerAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.rightAlign {
    background: url(../images/rightAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.circle {
    border: solid 2px #525252;
    background-color: black;
    border-radius: 50px;
    height: 25px;
    width: 25px;
}

.plus {
    background: url(../images/plus.png) no-repeat center center;
    background-size: auto;
    height: 100%;
}

.iconBox {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    width: 50px;
    height: 50px;
    border-style: solid;
    border-width: 2px
}

.iconBox>div {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    border-style: dotted;
    height: 65%;
}

.logoUp {
    background: url(../images/logoUp.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoLeft {
    background: url(../images/logoLeft.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoRight {
    background: url(../images/logoRight.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoDown {
    background: url(../images/logoCenter.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.mg-5 {
    margin: 5px;
}

.pd-10 {
    padding: 10px;
}

.pd-5 {
    padding: 5px;
}

.pd-b-5 {
    padding-bottom: 5px;
}

.mg-10 {
    margin: 10px;
}

附加所需设计。我不需要代码，而是以最好的方式开始这个设计的方法。解释一下会有帮助的。

javascript

html

jquery

css

回答 3

Stack Overflow用户

发布于 2021-05-11 06:19:00

对不起，如果这是一个快速的解决方案，但它解决了两个元素之间的空间问题。这是最简单的解决方案，我没有碰过你的任何元素。我只是将这个属性添加到pd10类中。检查代码：*如果需要，可以删除页边距，但出于样式原因，我将其添加：

body {
    background-color: #262626;
    color: #c7c7c7;
    font-family: lucidagrande;
    /* font-size: 11px; */
    font-weight: 400;
}

input[type=text] {
    background-color: #262626;
    border-color: #525252;
    color: #c7c7c7;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    width: 10%;
    text-align: center;
}

textarea {
    background-color: #262626;
    border-color: #525252;
    color: #c7c7c7;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    width: 95%; 
 }


/* .topSection {
    padding: 10px;
} */

.topSection>div,
.leftSection {
    display: inline-block;
    background-color: #323232;
}

.flexContainer {
    display: flex;
    flex-wrap: nowrap;
    margin: 10px;
}

.box {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    width: 16px;
    text-align: center;
    border-style: solid;
    border-width: 2px;
}

.topBar {
    margin-bottom: 15px;
    margin-top: 5px;
}

.topBar>div {
    display: inline-block;
    vertical-align: bottom;
}

.leftAlign {
    background: url(../images/leftAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.centerAlign {
    background: url(../images/centerAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.rightAlign {
    background: url(../images/rightAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.circle {
    border: solid 2px #525252;
    background-color: black;
    border-radius: 50px;
    height: 25px;
    width: 25px;
}

.plus {
    background: url(../images/plus.png) no-repeat center center;
    background-size: auto;
    height: 100%;
}

.iconBox {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    width: 50px;
    height: 50px;
    border-style: solid;
    border-width: 2px
}

.iconBox>div {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    border-style: dotted;
    height: 65%;
}

.logoUp {
    background: url(../images/logoUp.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoLeft {
    background: url(../images/logoLeft.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoRight {
    background: url(../images/logoRight.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoDown {
    background: url(../images/logoCenter.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.mg-5 {
    margin: 5px;
}

.pd-10 {
    padding: 10px;
    display:flex;
    text-align-last: justify;
    margin:10px;
}

.pd-5 {
    padding: 5px;
}

.pd-b-5 {
    padding-bottom: 5px;
}

.mg-10 {
    margin: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <div class="mainContainer">
        <div class="topSection pd-10">
            <div class="pd-10">
                <div class="topBar">
                    <input type="text" value="36 pt">
                    <input type="text" value="Auto">
                    <div class="box">
                        <div class="leftAlign"></div>
                    </div>
                    <div class="box">
                        <div class="centerAlign"></div>
                    </div>
                    <div class="box">
                        <div class="rightAlign"></div>
                    </div>
                    <div>
                        <div class="circle"></div>
                    </div>
                </div>
                <div>
                    <textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
                </div>
            </div>
            <div>
                <div class="flexContainer">
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                    <div class="iconBox mg-5 ">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                </div>
                <div class="flexContainer">
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="mg-10 box">
                    <div class="logoUp"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoLeft"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoRight"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoDown"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

票数 1

Stack Overflow用户

发布于 2021-05-11 06:57:27

我改了几节课。您可以在这里查看工作示例：https://jsfiddle.net/1924ovfp/78/。

下面是片段：

body {
  background-color: #262626;
  color: #c7c7c7;
  font-family: lucidagrande;
  /* font-size: 11px; */
  font-weight: 400;
}

input[type=text] {
  background-color: #262626;
  border-color: #525252;
  color: #c7c7c7;
  border-style: solid;
  border-radius: 5px;
  padding: 5px;
  width: 10%;
  text-align: center;
}

textarea {
  background-color: #262626;
  border-color: #525252;
  color: #c7c7c7;
  border-style: solid;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  /* width: 95%; */
}


/* .topSection {
    padding: 10px;
} */

.flexContainer {
  display: flex;
  flex-wrap: nowrap;
  margin: 10px;
}

.box {
  background-color: #262626;
  border-color: #525252;
  border-radius: 5px;
  padding: 5px;
  width: 16px;
  text-align: center;
  border-style: solid;
  border-width: 2px;
}

.topBar {
  margin-bottom: 15px;
  margin-top: 5px;
  width: 100%;
}

.bottomBar{
 width: 100%; 
 padding-right:15px;
}

.bottomBar textarea{
   width: 98%; 
}

.topBar>div {
  display: inline-block;
  vertical-align: bottom;
}

.leftAlign {
  background: url(../images/leftAlign.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.centerAlign {
  background: url(../images/centerAlign.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.rightAlign {
  background: url(../images/rightAlign.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.circle {
  border: solid 2px #525252;
  background-color: black;
  border-radius: 50px;
  height: 25px;
  width: 25px;
}

.plus {
  background: url(../images/plus.png) no-repeat center center;
  background-size: auto;
  height: 100%;
}

.iconBox {
  background-color: #262626;
  border-color: #525252;
  border-radius: 5px;
  padding: 5px;
  width: 50px;
  height: 50px;
  border-style: solid;
  border-width: 2px
}

.iconBox>div {
  background-color: #262626;
  border-color: #525252;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  border-style: dotted;
  height: 65%;
}

.logoUp {
  background: url(../images/logoUp.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.logoLeft {
  background: url(../images/logoLeft.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.logoRight {
  background: url(../images/logoRight.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.logoDown {
  background: url(../images/logoCenter.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.mg-5 {
  margin: 5px;
}

.pd-10 {
  padding: 10px;
}

.pd-5 {
  padding: 5px;
}

.pd-b-5 {
  padding-bottom: 5px;
}

.mg-10 {
  margin: 10px;
}

.mainContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap:5px;
}

.mainContainer>div {
  display: inline-block;
  background-color: #323232;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/style.css">
  </head>

  <body>
    <div class="mainContainer">
      <div class="pd-10 container_1">
        <div class="topBar">
          <input type="text" value="36 pt">
          <input type="text" value="Auto">
          <div class="box">
            <div class="leftAlign"></div>
          </div>
          <div class="box">
            <div class="centerAlign"></div>
          </div>
          <div class="box">
            <div class="rightAlign"></div>
          </div>
          <div>
            <div class="circle"></div>
          </div>
        </div>
        <div class="bottomBar">
          <textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
        </div>
      </div>
      <div class="container_2">
        <div class="flexContainer">
          <div class="iconBox mg-5">
            <div>
              <div class="plus"></div>
            </div>
          </div>
          <div class="iconBox mg-5 ">
            <div>
              <div class="plus"></div>
            </div>
          </div>
        </div>
        <div class="flexContainer">
          <div class="iconBox mg-5">
            <div>
              <div class="plus"></div>
            </div>
          </div>
          <div class="iconBox mg-5">
            <div>
              <div class="plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="container_3">
        <div class="mg-10 box">
          <div class="logoUp"></div>
        </div>
        <div class="mg-10 box">
          <div class="logoLeft"></div>
        </div>
        <div class="mg-10 box">
          <div class="logoRight"></div>
        </div>
        <div class="mg-10 box">
          <div class="logoDown"></div>
        </div>
      </div>
    </div>
  </body>

票数 1

Stack Overflow用户

发布于 2021-05-11 04:45:27

在CSS文件中，将宽度添加到40%。我想它会纠正你的问题。

.pd-10 {

    padding: 10px;
    width: 40%;
}

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67480583

复制

相似问题

问使用CSS和HTML对齐项问题
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS和HTML对齐项问题EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS和HTML对齐项问题
EN