代码之家  ›  专栏  ›  技术社区  ›  RejectEd27

无法从方框中删除边距

bootstrap-4 margin twitter-bootstrap css html
  •  1
  • RejectEd27  · 技术社区  · 8 年前

    我想并排放置2个div,但其中一个div有一个我无法删除的边距。 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	margin: 0 !important;
	width: 100px;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>

    我试过使用!重要的功能,但似乎不起作用。

    What it should look like

    我还删除了 col-md-12 在两者上 numberedTitle 和 subtitleHolder 但这并没有改变任何事情。

    5 回复  |  直到 8 年前
        1
  •  1
  •   Bourbia Brahim    8 年前

    只需添加 display: inline-block ; 到您的 .numberedTitle 并且不需要设置边距。

    sett inline block,将使div充当内联html标记,但也保留块元素的维度属性(如宽度、高度)。 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	width: 100px;
  display: inline-block;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>
        2
  •  1
  •   user7207170 user7207170    8 年前

    这并不是因为你的利润,他们没有放在一起。这是因为div not an inline component 与span不同,因此默认情况下,每个div都在新行中生成。 要使它们并排排列,您只需添加 float:left 到div,如下所示。希望有帮助。 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	float:left;
	width: 100px;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>
        3
  •  1
  •   Andrii Pryimak    8 年前

    使用 display:inline-block; 到您的 numberedTitle 类别: 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	margin: 0 !important;
	width: 100px;
  display:inline-block;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>
        4
  •  0
  •   MHD Alaa Alhaj Shuo    8 年前

    这 margin 出现是因为它是默认的div行为,这意味着它将作为 块 即使您为 宽度 .

    因此,您可以使用bootstrap内置类(即。 class="pull-left" )为了使元件浮动到左侧,这应该可以解决您的问题。 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	margin: 0 !important;
	width: 100px;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle pull-left">
    <span>01</span>
  </div>
  <div class="subtitleHolder pull-left">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>

    或者,你可以添加 display: inline-block 到 .numberedTitle . 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	margin: 0 !important;
	width: 100px;
	display: inline-block;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>
        5
  •  0
  •   Elvin Mammadov    8 年前

    只需添加显示:内联块;给你的。数字标题 

    . numberedTitle {
display: inline-block;
}
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    1 年前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    1 年前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    1 年前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号