无法让文字留在左边

时间：2016-05-22 04:42:42

标签： html css html5 css3 css-position

请参阅我的jsfiddle中的enter image description here图标？它保持原位，无论屏幕宽度如何都不会移动。

然而，旁边的文字并没有以相同的方式行事。

我希望文本在enter image description here图标旁边是正确的，即使在更改窗口宽度使div变小时导致隐藏某些文本时也不会移动。

JSFIDDLE 

@charset "UTF-8";
.row {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: inline-block
}
.row.blockDisplay {
	display: block;
}
.column_60 {
	width: 55%;
	float: left;
	margin-top: 0px;
	margin-left:1%;
}
.column_40 {
	width: 44%;
	float: left;
	margin-top: 0px;
}
.columns {
	width: 25%;
	float: left;
	font-family: "Source Sans Pro";
	color: #A5A5A5;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
.row .columns p {
	padding-left: 10%;
	padding-right: 10%;
}


.left_half {
	background-color: #52BAD5;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
	font-weight: bold;
}
 
.right_half {
	background-color: #01B2D1;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
	font-weight: bold;
}
 
 
 

@media (max-width: 320px) {

.secondary_header {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 1px;
	padding-bottom: 40px;
}

.columns {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0PX;
	padding-right: 0PX;
	padding-bottom: 0PX;
	padding-left: 0PX;
}

.column_40.left_half {
	width: 100%;
}
.column_60.right_half {
	width: 100%;
}


}

@media (min-width: 321px) and (max-width: 768px) {
.columns {
	width: 100%;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.column_40.left_half {
	width: 100%;
}
.column_60.right_half {
	width: 100%;
}
}

@media (min-width: 769px) and (max-width: 1000px) {
.columns {
	width: 50%;
	float: left;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.container .columns p {
	padding-left: 25px;
	padding-right: 25px;
}
}


.taskPreviewWrap{
	list-style:none;
	margin-left:-40px;
	margin-top:-5px;
	color:#194e8d;
	}
.taskPreviewWrap li {
	height:auto;
	width:auto;
	background:white;
	border-radius:6px;
	background-color:#011222;
	padding-top:9px;
	margin-top:5px;
	}
.dragdotsicon{
	width:7px;
	height:20px;
	background: url(http://s32.postimg.org/qlhqncer9/dragdots.png);
	margin-left:14px;
	margin-top:9px;
	}
.t-Date {
	font-weight:normal;
	font-size:9pt;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:inline-block;
	vertical-align: top;
	position:relative;
	margin-top:-17px;
	margin-left:-197px;
	letter-spacing:-0.4px;
	}
.t-Date:after {
	content:"";
	width:1px;
	height:29px;
	background-color:#194e8d;
	display: inline-block;
	position:absolute;
	margin-top:-8px;
	margin-left:12px;
	}
.t-ShortDesc{
font-weight:bold;
	font-size:9pt;
	letter-spacing:-0.2px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:inline-block;
	vertical-align: top;
	position:absolute;
	text-overflow: ellipsis; /* will make [...] at the end */
    width: 22%; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
    overflow:hidden; /* older browsers */
	margin-left:24px;
	margin-top:-17px;
	}
<div class="row"></div>
<div class="row blockDisplay">

  <div class="column_40 left_half">
    <ul class="taskPreviewWrap">

      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want everything in this line to stay to the left</span>
      </li>

      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want everything in this line to stay to the left</span>
      </li>

      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want everything in this line to stay to the left</span>
      </li>

    </ul>

  </div>

  <div class="column_60 right_half">
    <h2 class="column_title">RIGHT COLUMN</h2>
  </div>

</div>

1 个答案:

答案 0 :(得分：2)

将text-align: left应用于.taskPreviewWrap li。

在.t-Date上，将margin-left: -197px调整为margin-left: 40px（例如）。

Revised Fiddle

＆＃13;
＆＃13; 
@charset "UTF-8";
.row {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: inline-block
}
.row.blockDisplay {
	display: block;
}
.column_60 {
	width: 55%;
	float: left;
	margin-top: 0px;
	margin-left:1%;
}
.column_40 {
	width: 44%;
	float: left;
	margin-top: 0px;
}
.columns {
	width: 25%;
	float: left;
	font-family: "Source Sans Pro";
	color: #A5A5A5;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
.row .columns p {
	padding-left: 10%;
	padding-right: 10%;
}


.left_half {
	background-color: #52BAD5;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
	font-weight: bold;
}
 
.right_half {
	background-color: #01B2D1;
	color: #FFFFFF;
	font-family: "Source Sans Pro";
	text-align: center;
	font-weight: bold;
}
 
@media (max-width: 320px) {

.secondary_header {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 1px;
	padding-bottom: 40px;
}

.columns {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0PX;
	padding-right: 0PX;
	padding-bottom: 0PX;
	padding-left: 0PX;
}

.column_40.left_half {
	width: 100%;
}
.column_60.right_half {
	width: 100%;
}


}

@media (min-width: 321px) and (max-width: 768px) {
.columns {
	width: 100%;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.column_40.left_half {
	width: 100%;
}
.column_60.right_half {
	width: 100%;
}
}

@media (min-width: 769px) and (max-width: 1000px) {
.columns {
	width: 50%;
	float: left;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.container .columns p {
	padding-left: 25px;
	padding-right: 25px;
}
}

.taskPreviewWrap{
	list-style:none;
	margin-left:-40px;
	margin-top:-5px;
	color:#194e8d;
	}
.taskPreviewWrap li {
	height:auto;
	width:auto;
	background:white;
	border-radius:6px;
	background-color:#011222;
	padding-top:9px;
	margin-top:5px;
    
    text-align: left; /* NEW */
	}
.dragdotsicon{
	width:7px;
	height:20px;
	background: url(http://s32.postimg.org/qlhqncer9/dragdots.png);
	margin-left:14px;
	margin-top:9px;
	}
.t-Date {
	font-weight:normal;
	font-size:9pt;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:inline-block;
	vertical-align: top;
	position:relative;
	margin-top:-17px;
	/* margin-left:-197px; */
    margin-left: 40px; /* NEW */
	letter-spacing:-0.4px;
	}
.t-Date:after {
	content:"";
	width:1px;
	height:29px;
	background-color:#194e8d;
	display: inline-block;
	position:absolute;
	margin-top:-8px;
	margin-left:12px;
	}
.t-ShortDesc{
font-weight:bold;
	font-size:9pt;
	letter-spacing:-0.2px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:inline-block;
	vertical-align: top;
	position:absolute;
	text-overflow: ellipsis; /* will make [...] at the end */
    width: 22%; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
    overflow:hidden; /* older browsers */
	margin-left:24px;
	margin-top:-17px;
	}
＆＃13; 
<div class="row"></div>
<div class="row blockDisplay">
  <div class="column_40 left_half">
    <ul class="taskPreviewWrap">
      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want all the text and dates in this line to stay to the left next to the dots icon instead of moving due to divs width expanding</span>
      </li>
      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want all the text and dates in this line to stay to the left next to the dots icon instead of moving due to divs width expanding</span>
      </li>
      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want all the text and dates in this line to stay to the left next to the dots icon instead of moving due to divs width expanding</span>
      </li>
    </ul>
  </div>
  <div class="column_60 right_half">
    <h2 class="column_title">RIGHT COLUMN</h2>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题