Остановка текста от обертки вокруг кратных изображений

Question

Я использую aspx для создания html-страницы. В сущности, я использую LinkButtons с изображением и ярлыком внутри них, которые служат в качестве ссылок для меню навигации.

Когда я просматриваю страницу в html, я получил div, который содержит изображение и интервал каждый. Текст затем обертывается вокруг самого изображения, так как ширины недостаточно, чтобы текст мог отображаться за один раз.

Я прочитал несколько других вопросов, таких как: Stopping text from wrapping around image, которые обрабатывают это, и это работает для одного из изображений, но как только я пытаюсь использовать эти методы для всех элементов навигации, у меня есть проблема, что поплавок слева перемещает изображения и их текст вправо для каждого изображения (таким образом, второе изображение находится дальше, чем первое изображение, ....). То есть для версий, где он работал, текст остается справа от изображения. В большинстве случаев это не сработало.

Что может быть осложнено здесь, так это то, что div, содержащий меню (#MenuDiv), имеет абсолютное положение, которое я динамически (путем добавления/удаления классов) меняю на фиксированное положение и обратно (так как меню прокручивается вверх с помощью экран и когда он находится в самом верхнем положении, там фиксируется).

И, как упомянуто MenuDiv не очень широкой (около 100 пикселей в ширину и изображение занимает до 24)

В примере кода

<div id="MenuDiv"> 
    <div id="menuItem1"> 
     <image style="width: 24px; height: 24px;" /> 
     <span>This is a long menu text for testing</span> 
    </div> 
    <div id="menuItem2"> 
     <image style="width: 24px; height: 24px;" /> 
     <span>Short text</span> 
    </div>  
    <div id="menuItem3"> 
     <image style="width: 24px; height: 24px;" /> 
     <span>This is a long menu text for testing</span> 
    </div>   
</div> 

С MenuDiv, имеющий следующие статистику CSS.

#MenuDiv { 
    position: absolute; 
    top: 50px; 
    left: 30px; 
    width: 100px; 
} 

#MenuDiv.FixedPosition { 
    position: fixed; 
    top: 0px; 
    left: 30px; 
    width: 100px; 
} 

Моя цель, чтобы каждый элемент навигации имеет текст справа от изображения и, таким образом, мой вопрос, как я могу добиться этого (при достижении, что каждое изображение ниже другого)?

Answer 1

один путь:

#MenuDiv { 
    position: absolute; 
    top: 50px; 
    left: 30px; 
    width: 100px; 
} 

#MenuDiv > div { 
    display: table; 
    margin-bottom: 10px; 
} 

#MenuDiv img { 
    display: table-cell; 
    vertical-align:middle; 
    margin-right: 5px; 
} 

#MenuDiv div span { 
    display: table-cell; 
    vertical-align:middle; 
} 

Answer 2

Мне нравится ответ Mia SNO, но я все для предоставления вариантов ..

#MenuDiv { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 30px; 
 
    width: 100px; 
 
} 
 

 
#MenuDiv.FixedPosition { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 30px; 
 
    width: 100px; 
 
} 
 

 
#MenuDiv>div>img, #MenuDiv>div>span { 
 
    display:inline-block; 
 
    vertical-align:top; 
 
    } 
 

 
#MenuDiv>div>img { 
 
    width:24px; 
 
    height:24px; 
 
    } 
 

 
#MenuDiv>div>span { 
 
    width:70px; /*Allow for 4px white space*/ 
 
    }

<div id="MenuDiv"> 
 
    <div id="menuItem1"> 
 
     <image src="http://placehold.it/24x24" /> 
 
     <span>This is a long menu text for testing</span> 
 
    </div> 
 
    <div id="menuItem2" > 
 
     <image src="http://placehold.it/24x24" /> 
 
     <span>Short text</span> 
 
    </div>  
 
    <div id="menuItem3" > 
 
     <image src="http://placehold.it/24x24" /> 
 
     <span>This is a long menu text for testing</span> 
 
    </div>   
 
</div>

Answer 3

Я добавил white-space: nowrap; это получает ваш текст в одной строке.

#MenuDiv { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 30px; 
 
    width: 100px; 
 
} 
 

 
#MenuDiv.FixedPosition { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 30px; 
 
    width: 100px; 
 
} 
 

 
#MenuDiv>div>img, #MenuDiv>div>span { 
 
    display:inline-block; 
 
    vertical-align:top; 
 
    } 
 

 
#MenuDiv>div>img { 
 
    width:24px; 
 
    height:24px; 
 
    } 
 

 
#MenuDiv>div>span { 
 
    width: 70px; 
 
    white-space: nowrap; 
 
}

<div id="MenuDiv"> 
 
    <div id="menuItem1"> 
 
     <image src="http://placehold.it/24x24" /> 
 
     <span>This is a long menu text for testing</span> 
 
    </div> 
 
    <div id="menuItem2" > 
 
     <image src="http://placehold.it/24x24" /> 
 
     <span>Short text</span> 
 
    </div>  
 
    <div id="menuItem3" > 
 
     <image src="http://placehold.it/24x24" /> 
 
     <span>This is a long menu text for testing</span> 
 
    </div>   
 
</div>